停止事件冒泡 - onclick 监听器答案

【问题标题】：Stop event bubbling - onclick listener停止事件冒泡 - onclick 监听器
【发布时间】：2017-05-23 08:28:09
【问题描述】：

为什么点击父 div 元素可以完成这项工作，但点击子 div 文本 Click Me! 返回 undefined 并且页面无法在 iframe 中加载？我用event.stopPropagation 停止冒泡，但它仍然是一样的。当addEvenLisneter 优于内联onclick 时，正确的方法是什么？

var panel = document.getElementsByClassName('panel');
var iframe = document.getElementById('frame');

[].forEach.call(panel, function(each) {
    each.addEventListener('click', linkClick);
});

function linkClick ( event ) {
    event.stopPropagation();
    event.preventDefault();
    iframe.src = event.target.dataset.url;
}

.panel {
    padding: 20px;
    margin: 10px;
    border: 1px solid yellow;
}

.panel div {
  display: inline;
}

<div class="panel" data-url="https://www.w3schools.com/jsref/event_preventdefault.asp">
  <div>Click Me!</div>
</div>
<iframe id="frame"></iframe>

当我console.log(event)气泡属性仍然设置为true。

【问题讨论】：

"但点击文本字段" — 什么文本字段？您的示例中没有文本字段。提供真实的minimal reproducible example。
对不起，我指的是divClick Me!中的文字
但是我停止在父 div 上冒泡，如果我理解冒泡正确，它不应该在子 div 中寻找 data-url。
嘿，是泡泡，不是石头——泡泡会弹出来！
那么我该如何阻止孩子们的问题呢？

标签： javascript addeventlistener event-bubbling

【解决方案1】：

如果您阻止点击事件从内部 div 冒泡，那么它永远不会到达您绑定事件处理程序的那个，并且您的函数根本不会触发。

这里的问题是event.target 匹配实际点击的元素。如果要获取事件处理程序绑定到的元素，则需要 event.currentTarget。

var panel = document.getElementsByClassName('panel');
var iframe = document.getElementById('frame');

[].forEach.call(panel, function(each) {
    each.addEventListener('click', linkClick);
});

function linkClick ( event ) {
    event.stopPropagation();
    event.preventDefault();
    iframe.src = event.currentTarget.dataset.url;
}

.panel {
    padding: 20px;
    margin: 10px;
    border: 1px solid yellow;
}

.panel div {
  display: inline;
}

<div class="panel" data-url="https://www.w3schools.com/jsref/event_preventdefault.asp">
  <div>Click Me!</div>
</div>
<iframe id="frame"></iframe>

【讨论】：

现在，它完全不工作，一直给 undefined
是的，首先我也删除了dataset，所以它没有用。现在工作正常，谢谢。

【解决方案2】：

好吧，我实际上并没有像这样解决问题，更像是一种解决方法。

也许您可以尝试使用按钮，因为这是更有效的 HTML。

我稍微修改了 CSS，所以它与您的示例相匹配。

<!DOCTYPE html>
<html>
<style>
.panel {
    padding: 20px;
    margin: 10px;
    border: 1px solid yellow;
    display:block;
    width:100%;
    text-align:left
}

</style>
<body>

<button class="panel" data-url="https://www.w3schools.com/jsref/event_preventdefault.asp" type="button">Click Me!</button>
<iframe id="frame"></iframe>

</body>
<script>
var panel = document.getElementsByClassName('panel');
var iframe = document.getElementById('frame');

[].forEach.call(panel, function(each) {
    each.addEventListener('click', linkClick);
});

function linkClick ( event ) {
    event.stopPropagation();
    event.preventDefault();
    iframe.src = event.target.dataset.url;
}
</script>
</html>

【讨论】：