在子DIV或SPAN中防止锚元素的默认操作 - HTML

时间:2013-11-20 01:07:27

标签: javascript html

我有一个如下所示的按钮

enter image description here

如果用户点击按钮的电话号码部分,我想要调用一个操作。如果用户点击按钮其余部分的任何部分,则应将其转到其他页面。

我已将所有内容嵌套到一个锚元素中,如此

<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索引,其中索引的索引高于锚点。

如果用户单击电话号码范围,则默认锚操作仍将浏览器重定向到链接页面。

如何防止在此实例中发生默认操作?

3 个答案:

答案 0 :(得分:1)

demo

在某些浏览器中(例如: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)

call()中的

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();