Question

为什么点击父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) bubble属性仍然设置为true时。

Answer 1

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

停止事件冒泡 - onclick监听器

2 个答案: