Javascript 停止事件冒泡-onclick侦听器_Javascript_Addeventlistener_Event Bubbling

Javascript 停止事件冒泡-onclick侦听器

javascript

Javascript 停止事件冒泡-onclick侦听器,javascript,addeventlistener,event-bubbling,Javascript,Addeventlistener,Event Bubbling,为什么单击父div元素可以完成任务，而单击子div文本单击我！返回未定义且页面未在iframe中加载？我使用event.stopPropagation来停止冒泡，但它仍然是一样的。当AddEventLisNeter优于内联onclick时，正确的方法是什么 var panel=document.getElementsByClassName'panel'； var iframe=document.getElementById'frame'； []forEach.callpanel，functio

为什么单击父div元素可以完成任务，而单击子div文本单击我！返回未定义且页面未在iframe中加载？我使用event.stopPropagation来停止冒泡，但它仍然是一样的。当AddEventLisNeter优于内联onclick时，正确的方法是什么

var panel=document.getElementsByClassName'panel'； var iframe=document.getElementById'frame'； []forEach.callpanel，functioneach{ 每个.addEventListener'click'，linkClick； }; 函数链接单击事件{ 事件。停止传播；违约事件； iframe.src=event.target.dataset.url； } .小组{ 填充：20px；利润率：10px；边框：1px纯黄色； } .事务委员会分区{ 显示：内联； } 点击我！

如果您阻止click事件从内部div冒泡，那么它将永远不会到达您将事件处理程序绑定到的事件处理程序，并且您的函数将根本不会启动

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

var panel=document.getElementsByClassName'panel'； var iframe=document.getElementById'frame'； []forEach.callpanel，functioneach{ 每个.addEventListener'click'，linkClick； }; 函数链接单击事件{ 事件。停止传播；违约事件； iframe.src=event.currentTarget.dataset.url； } .小组{ 填充：20px；利润率：10px；边框：1px纯黄色； } .事务委员会分区{ 显示：内联； } 点击我！

其实我并不是在解决这个问题，更像是一个变通办法

也许你可以试着用一个按钮代替，因为这是一个稍微有效的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>

但是点击文本字段-什么文本字段？您的示例中没有文本字段。提供一个真实的。对不起，我是指div中的文本单击我！但我停止了在父div上冒泡，如果我理解冒泡是正确的，它不应该在子div中查找数据url。嘿，这是冒泡，没有石头冒泡弹出！那么，我如何才能阻止一个涉及到儿童的数据集呢？现在，它不完全起作用，总是给出未定义的数据集是的，首先我也删除了数据集，所以它不起作用。现在很好，谢谢。