如何將 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/

在鏈接的示例中，我在頂層獲取事件並在底層創建一個類似的事件。 您可以通過單獨單擊每個元素（而不是整體的頂部和底部）來進一步執行此操作。

這是從另一個問題借來的想法： Triggering a JavaScript click() event at specific坐標

Answer 2

對於九年后（就像我一樣）在這個問題上絆倒的人來說，現在最好的方法是使用 CSS 指針事件屬性......只需將它的元素設置為“無”，看看魔法。 不需要JS。

https://caniuse.com/#search=pointer-events

Answer 3

我不太確定我理解你的要求。 這聽起來有點像工具提示。 下面是一個如何使用 jQuery、CSS 和 HTML 執行工具提示的示例。

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

希望這能讓你開始。 如果您添加更多詳細信息，或使用更多詳細信息修改該 jsbin，我們可以進行一些迭代。

我對示例進行了一些更新，以使用 jQuery 將工具提示信息存儲到 html 元素本身中。 這更干凈一些。

鮑勃

Answer 4

這可能看起來過於復雜和不雅......它偽造了你的功能......但它有效;）

$(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/