javascript - 如何禁用标题工具提示！（是：如何在 Javascript 中获取事件目标后面的元素？）

Question

我有一个元素位于另一个元素的顶部，如何忽略顶部元素的点击捕获并将其传递给它下面的元素？

$('a[title]').each(function (index) {
    $(this).after('&lt;div class="overlay" style="position:absolute;background:url(../Images/space.gif);width:100px;height:100px;top:0;left:0;z-index:300"></div>')
})

原因是这段代码阻止了标题工具提示的弹出。hover 伪类仍然在它后面的链接上工作，因为它附加到包含它们的元素上，如下所示：

li:hover a { ... }

Answer 1

看起来你所有的链接都有一个元素，上面有相同的id 叠加层。

删除id并添加一个class到你的透明块div。

然后添加一个click事件class来做你想要的parent元素。

Answer 2

请发布我们可以使用的示例标记。通常您只需将事件处理程序附加到您想要的元素，我不明白您遇到了什么问题。

编辑 如果我理解正确，这是某种工具提示，您希望用户传递点击事件。首先，您不能在循环中使用 id="overlay"，因为 id 必须是唯一的。一种简单的方法是使用 .bind 为 pre-1.7 jquery 创建一个事件处理程序，或者为 1.7 创建一个事件处理程序

$('a[title]').each(function (index, el) {
      var $tooltip = $( '<div id="overlay-' + index  + '" />' ) 
                         //let JQuery create the CSS instead of using a style tag
                         .css({ position   : "absolute"
                              , background : "url(../Images/space.gif)"
                              , width   : 100
                              , height  : 100
                              , top     : 0
                              , left    : 0
                              , zIndex  : 300
                             })
                         //attach click handler to div
                         .on( 'click', function( e ){
                               $( el ).trigger( 'click' );
                            });
      $(this).after( $tooltip );
})

Answer 3

--------解决方案----------

 $('a[title]').each(function (index, el) {
    var $tooltip = $('<div class="overlay-' + index + '" />')
                         .css({
                            position: "absolute"
                            , background: "url('../Images/space.gif')"
                            , width: $(el).width()
                            , height: $(el).height()
                            , top: 0
                            , left: 0
                            , zIndex: 300
                            , border: "1px solid red"
                         })
                         .on('click', function (event) {
                             $(el).click();
                         });
    $(this).after($tooltip);
})