如何禁用标题工具提示！(was:如何在Javascript中获取事件目标后面的元素?

How to disable title tooltips! (was: How to get element behind event target in Javascript?)

本文关键字：目标 事件 获取 元素 工具提示 标题 何禁用 was Javascript      更新时间：2023-09-26

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

$('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>')
})

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

li:hover a { ... }

看起来所有链接都有一个元素，上面覆盖着相同的id。

删除id并向透明块div添加class。

然后将 click 事件添加到此class，并对 parent 元素执行所需的操作。

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

编辑如果我理解正确，这是某种工具提示，您希望用户传递单击事件。首先，你不能在循环中使用id="overlay"，因为id必须是唯一的。 一个简单的方法是使用 .bind 为 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 );
})

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

 $('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);
})
相关文章：