Question

我能找到的与这个问题相关的所有答案都试图做出相反的方向。那么......这有可能吗？

我有一个简单的HTML片段

<div class="launcher" data-info="something">
  <a href="http://somplace.com">Text, or image, or whatever</a>
</div>

launcher类会向div添加一个事件，该事件获取data-info值并对其执行某些操作（例如，在叠加层中启动视频）。

如何才能解除div的事件？（内部链接是出于无脚本和语义原因;完整代码包括各种schema.org属性。）

嵌入式脚本 - onClick="return false;" - 不是一个选项;行为耦合是邪恶的。我没有问题将另一个事件附加到<a>，因为这是一个类定义。是的，我需要它在IE9之前工作（因为有人在那里......）纯粹的javascript（不是jQuery）响应将不胜感激。

Answer 1

您可以按如下方式检查event.target：

var parent = document.getElementsByClassName("launcher")[0];
    parent.addEventListener("click",function(e){
        if(e.target.className.indexOf("launcher")> -1){
           alert("click!");
        }
    });

div{
  height:50px;
  background:dodgerblue;
}

<div class="launcher" data-info="something">
  <a href="#">Text, or image, or whatever</a>
</div>

或者您可以为锚点添加另一个单击事件侦听器，并阻止其传播，如下所示：

var parent = document.getElementsByClassName("launcher")[0];
        parent.addEventListener("click",function(e){
            if(e.target.className.indexOf("launcher")> -1){
               alert("click!");
            }
        });
var anchor = document.querySelector(".launcher a");
        anchor.addEventListener("click",function(e){
            e.stopPropagation();
        })

div{
  height:50px;
  background:dodgerblue;
}

<div class="launcher" data-info="something">
  <a href="#">Text, or image, or whatever</a>
</div>

仅在外部html元素上执行事件

1 个答案: