[英]How I can prevent the click event on a link which is nested on another element which also use onclick?
I have this simple code 我有这个简单的代码
<span class="doit"><a class="doit"href="ww.domain.com">text</a></span>
I want the click on the class "do it" fired a function, so I tried this 我想点击类“ do it”触发一个函数,所以我尝试了
$(document).on('click', '.doit', function(e) {
// prevents to handle the click for nested objects again
e.stopPropagation();
alert("hello world");
});
Now I have the problem, that if I click on the <a href
the link from href will open and not the on.click function will be fired. 现在,我<a href
的问题是,如果单击<a href
,来自href的链接将打开,而不会触发on.click函数。
How I can prevent, that the link will be fired instead of the on.click event? 我如何防止触发链接而不是on.click事件?
UPDATE 1 更新1
I tried a suggested answer with this, failed because the href link is already opened. 我尝试了一个建议的答案,但失败,因为href链接已经打开。 I must prepare to open the link, only the on.click event should work. 我必须准备打开链接,只有on.click事件应该起作用。
<span class="doit">
<a class="doit" href="http://www.example.com" target="_blank">webcms von
<span class="doit">ABC</span>
<span class="doit">123</span>
</a>
</span>
if ($(e.target).is("a")) {
e.preventDefault(); // stop the href
alert("I WILLL not go to " + e.target.href);
e.cancelBubble = true; // do not click through
e.stopPropagation(); // just stop the event or it will trigger again on the span
return false;
}
console.log('target:'+e.target);
In the console I read: [object HTMLSpanElement 在控制台中,我读到:[对象HTMLSpanElement
I must find a way, which works in every way the html-tags are ordered or nested. 我必须找到一种方法,该方法可以以各种方式对html标签进行排序或嵌套。
Update 2 更新2
if ($(e.target).is("a"))
{
e.preventDefault(); // stop the href
}
e.cancelBubble=true; // do not click through
e.stopPropagation(); // just stop the event or it will trigger again on the span
alert("hello world");
I see the alert 'hello world' but after that, the link will still be opened 我看到警报“ hello world”,但此后,该链接仍将打开
Just test 只是测试
However I do not recommend you give the same class to the two elements 但是,我不建议您对这两个元素使用相同的类
Here you can click the link and the onclick of the span triggers but not the href 在这里,您可以单击链接和范围触发器的onclick,但不能单击href
Nested spans are not correct HTML by the way 顺便说一下,嵌套范围不是正确的HTML
$(document).on('click', '.doit', function(e) { if ($(e.target).is("a")) { e.preventDefault(); // stop the href alert("I WILLL not go to " + e.target.href); } e.cancelBubble=true; // do not click through e.stopPropagation(); // just stop the event or it will trigger again on the span alert("hello world"); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="doit"> <a class="doit" href="http://www.example.com" target="_blank">webcms von <span class="doit">4U</span> <span class="doit">.tools</span> </a> </span>
Alternative 替代
$(document) .on('click', 'a.doit', function(e) { e.preventDefault(); alert("I WILLL not go to " + e.target.href); }) .on('click', 'span.doit', function(e) { alert("hello world"); e.cancelBubble=true; e.stopPropagation() });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="doit"> <a class="doit" href="http://www.example.com" target="_blank">webcms von <span class="doit">4U</span> <span class="doit">.tools</span> </a> </span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.