我有一个如下所示的按钮
如果用户点击按钮的电话号码部分,我想要调用一个操作。如果用户点击按钮其余部分的任何部分,则应将其转到其他页面。
我已将所有内容嵌套到一个锚元素中,如此
<a id = "contact_button_outer" href = "http://mydomain.com/linkedtopage">
<button id = "contact_button">
Get Started Now.
<span id = "call_sales_button" onclick = "call();">
Call 111-111-1111
</span>
</button>
</a>
呼叫功能定义为
function call(){
/*what it do*/
return false
}
我还为锚点和跨度添加了z索引,其中索引的索引高于锚点。
如果用户单击电话号码范围,则默认锚操作仍将浏览器重定向到链接页面。
如何防止在此实例中发生默认操作?
答案 0 :(得分:1)
在某些浏览器中(例如:FF)HTMLElement
按钮会将每个event
收集到其自身,即使被严格指定为内部子元素。
最好的解决方案是更改标记并传递事件处理程序:
<a id="contact_button_outer" href="#">
<span id="contact_button">
Get Started Now.
<span id="call_sales_button" onclick="call(event);">
Call 111-111-1111
</span>
</span>
</a>
并使用event.preventDefault()
:
function call(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false; // IE
}
alert("calling");
}
FF test1:catch event on SPAN inside BUTTON
FF test2:catch event on SPAN inside a non-action element
答案 1 :(得分:0)
return false
将阻止跨度上的默认浏览器行为,但该事件仍会冒泡到父元素,并且不会取消对它们的操作。您需要做的是阻止事件传播到父元素。你可以通过以下方式做到这一点
function call(event) {
event.stopPropagation(); // modern browsers (IE9 and above)
event.cancelBubble = true; // IE8
//do something
}
答案 2 :(得分:0)
如果无效,请尝试
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();