好的,我很困惑。我在document
上有一个全局点击事件处理程序。在页面上我有几个链接。每个链接都由相同的单击事件处理程序处理,该处理程序除其他外,还阻止事件冒泡到文档级别并阻止链接执行。在这些链接中,有一个具有特定的点击处理程序,假定执行其操作,然后将事件传递给链接的通用单击事件。但事实并非如此。
document.onclick = function()
{
document.body.innerHTML += "You clicked me!";
};
document.getElementsByTagName("a")[0].onclick = function(e) {
this.innerHTML += " Click it!";
e.stopPropagation();
//This return false appears only to
//prevent the link from its default action
return false;
};
document.getElementById("link").onclick = function(e) {
this.innerHTML += " Go ahead, ";
//But this return false appears to stop
//the propagation up to the previous event
//I would think that removing the link below
//would cause the event to propagate to the event
//above which would then stop the propagation and
//prevent the default, but apparently this is
//not the case; removing the line below causes
//the link to load Google like normal
return false;
};
如何触发较低的事件以及最高事件然后取消事件?
明白我的意思here
答案 0 :(得分:1)
element.on<event>
只是在元素的DOM中设置属性,这意味着每个事件只能有一个处理程序。相反,我需要使用addEventListener
并正确使用event.preventDefault()
和event.stopPropagation()
在我的第一次尝试中,我将我想要的第一个处理程序放在第二位,但这确实意味着它超越了第一个。在这种情况下,我需要首先放置我想要的处理程序,因为处理程序正在附加到事件。
我修改后的代码应为:
document.onclick = function()
{
document.body.innerHTML += "You clicked me!";
};
document.getElementById("link").addEventListener("click",function() {
this.innerHTML += " Go ahead, ";
});
document.getElementsByTagName("a")[0].addEventListener("click",function(e) {
this.innerHTML += " Click it!";
e.stopPropagation();
e.preventDefault();
});