Javascript 防止锚固元件'；子DIV或SPAN-HTML中的默认操作

我有一个像下面这样的按钮

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

我已经将所有内容嵌套到锚元素中，如下所示

<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>

我还向锚点和跨度添加了z索引，跨度的索引比锚点的索引高

如果用户单击电话号码范围，默认的定位操作仍然会将浏览器重定向到链接页面

---

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

return false

inside call（）将阻止span上的默认浏览器行为，但事件仍将冒泡到父元素，并且不会取消对它们的操作。您需要做的是防止事件传播到父元素。你可以通过做下面这样的事情来做到这一点

function call(event) {
    event.stopPropagation(); // modern browsers (IE9 and above)
    event.cancelBubble = true; // IE8

    //do something
}

在某些浏览器中（即：FF）

HTMLElement

按钮将收集每个

事件

，甚至严格指定给内部子元素。
最好的解决方案是更改标记并传递事件处理程序：

<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>

FF测试1:
FF测试2:

如果没有任何效果，请尝试

 event.preventDefault();
 event.stopPropagation();
 event.stopImmediatePropagation();

---

为什么不干脆删除或打开其中一个链接，并使用

a

和

tel://

协议以本机方式处理呼叫（如果支持）？虽然您的问题非常清楚，表达得很好，但究竟为什么要这样做（通过直观的用户界面？）使用外部监听器而不是onclick…并使用@DavidThomas这是为在非移动设备上工作而设计的浏览器内呼叫系统。具体来说，我使用的是Twilio的API

function call(e){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false; // IE
    }
    alert("calling");
}

 event.preventDefault();
 event.stopPropagation();
 event.stopImmediatePropagation();