Как передать события JavaScript от одного элемента другому?

Question

Настройка сцены:

У меня есть 2 слоя один поверх другого.Нижний слой содержит ссылки (простые изображения). Верхний слой содержит расширенные всплывающие подсказки, например, всплывающие подсказки для нижнего слоя.Эти всплывающие подсказки могут быть большими (они могут легко накладываться на другие ссылки и почти всегда перекрывать ссылки, на которые они ссылаются).

Мой вопрос:

Я бы хотел, чтобы мои события при наведении курсора мыши происходили на нижнем слое, а затем при наведении курсора мыши отображали всплывающую подсказку на верхнем уровне.Таким образом, при удалении от нижней ссылки всплывающая подсказка в верхнем слое исчезает, и может появиться всплывающая подсказка для новой ссылки.

Как взять события из верхнего слоя и передать ихслой ниже вместо?Так что верхний слой прозрачен для событий.

Пример HTML:

jQuery(document).ready(function(){
	jQuery('div.tile').click(function(){
		jQuery('#log').html(this.id + " clicked");
		return false;
	});
	jQuery('div#top').click(function(){
		jQuery('#log').html('Top clicked');
		return false;
	});
});

.tile { width: 100px; height: 100px; position: absolute; }
.tile:hover, over:hover {border: 1px solid black;}
.over { width: 100px; height: 100px; position: absolute; display:none}
.stack, #sandwich { width: 400px; height: 400px; position: absolute; }
#tile1 {top: 50px; left: 50px;}
#tile2 {top: 75px; left: 10px;}
#tile3 {top: 150px; left: 310px;}
#tile4 {top: 250px; left: 250px;}
#tile5 {top: 150px; left: 150px;}
#over1 {top: 55px; left: 55px;}
#over2 {top: 80px; left: 15px;}
#over3 {top: 155px; left: 315px;}
#over4 {top: 255px; left: 255px;}
#over5 {top: 155px; left: 155px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div id="sandwich">
	<div class="stack" id="bottom">
		<div class="tile" id="tile1">1</div>
		<div class="tile" id="tile2">2</div>
		<div class="tile" id="tile3">3</div>
		<div class="tile" id="tile4">4</div>
		<div class="tile" id="tile5">5</div>
	</div>
	<div class="stack" id="top">
		<div class="over" id="over1">Tooltip for 1</div>
		<div class="over" id="over2">Tooltip for 2</div>
		<div class="over" id="over3">Tooltip for 3</div>
		<div class="over" id="over4">Tooltip for 4</div>
		<div class="over" id="over5">Tooltip for 5</div>
	</div>
</div>
<div id="log"></div>

На примере javascript я убедился, что события работают как обычно, и щелкается только верхняя часть.Но я в основном хочу, чтобы элементы «поверх» были прозрачными для событий.

Answer 1

Надеюсь, я понимаю OP, но вы можете повторить событие на любом селекторе после того, как произошло исходное событие: http://jsfiddle.net/Cr9Kt/1/

В связанном примере я беру событие на верхнем слое и создаюподобное событие произошло на нижнем слое.Это можно сделать с любым отдельным щелчком каждого элемента (в отличие от верхнего и нижнего элементов в целом).

Это заимствованная идея из другого вопроса: Инициирование события JavaScript click () вконкретные координаты

Answer 2

Это может показаться слишком сложным и не элегантным ... это подделывает вашу функциональность ... но это работает;)

$(document).ready(function(){
    var tileData = new Array();

    // get coordinate data for each tile
    $('div.tile').each(function(){
        var tileInfo = {};   
        tileInfo.id = this.id;
        tileInfo.text = $(this).text();
        tileInfo.width = $(this).outerWidth();
        tileInfo.height = $(this).outerHeight();
        tileInfo.position = $(this).position();
        tileInfo.coords = {};
        tileInfo.coords.top = tileInfo.position.top;
        tileInfo.coords.right = tileInfo.position.left + tileInfo.width;
        tileInfo.coords.bottom = tileInfo.position.top + tileInfo.height;
        tileInfo.coords.left = tileInfo.position.left;

        tileData.push(tileInfo);
    });

    $('div.tile').click(function(){
        $('#log').html(this.id + " clicked");
        return false;
    })       

    $('div#top').click(function(event){
        $('#log').html('Top clicked');

        // try to find tile under your mouse click
        for(i=0; i<tileData.length;i++){
            if(
                event.pageX >= tileData[i].coords.left &&
                event.pageX <= tileData[i].coords.right &&
                event.pageY >= tileData[i].coords.top &&
                event.pageY <= tileData[i].coords.bottom
            )  {
                // found a tile! trigger its click event handler
                $('#' + tileData[i].id).click();
            }
        }  

        return false;
    });
});

Попробуйте здесь: http://jsfiddle.net/neopreneur/vzq4z/1/

Answer 3

Я не совсем уверен, что понимаю, о чем вы просите.Это звучит для меня как подсказка.Вот пример того, как сделать всплывающую подсказку с помощью jQuery, CSS и HTML.

http://jsbin.com/ilali3/13/edit

Надеюсь, что вы начали.Если вы добавите еще какие-то подробности или измените этот jsbin, добавив больше подробностей, мы можем выполнить итерацию немного.

Я немного обновил пример, чтобы включить сохранение информации о всплывающей подсказке в самом элементе html с помощью jQuery.Это немного чище.

Боб