EventListener無法與錨tel：XXXXXXXXX一起使用

Question

我有一個帶有href="tel:XXXXXXXXX"的標簽，並且需要捕獲click事件。

我已經在chrome上測試了以下代碼： $(document).on('click',console.log) 。 如果我單擊此標簽瀏覽器，它將調用該應用程序，但不會觸發click事件。

$("a[href^='tel']").on('click', console.log);

這是可行的，但是我對ajax的內容加載有問題。 我的代碼已加載頁面，一段時間后應用程序通過ajax添加了內容。 當我使用$(document).on('click', ("a[href^='tel']", console.log) ，出現了問題。

Answer 1

$("a[href^='tel']").on("click", function(e){
    e.preventDefault(); e.stopPropagation();
    console.log(this);
    alert(this.getAttribute("href"));
})

//or if you want to delegate your function
$(document).on('click', "a[href^='tel']", function(e){
    e.preventDefault(); e.stopPropagation();
    console.log(this);
    alert(this.getAttribute("href"));
});

這會將事件偵聽器綁定到具有href屬性a標簽上a所有點擊，並阻止點擊本身。 單擊后，您將能夠使用控制台查看單擊了哪個元素以及使用了哪個href 。

Answer 2

我認為這會有所幫助

$("a").click(function(e) {
    e.preventDefault();
    alert('clicked');  
    window.location.href = 'tel:+496170961709';
});

Answer 3

好的，我找到了解決方案。 我使用較早的事件“ mousedown”，並將屬性“ href”更改為“ only number”以禁用操作單擊。

碼：

const click2dial_Event = function(e) {
    e.preventDefault();

    let a = $(this), number;

    if (a.attr('href') !== '#') {
        number = a.attr('href');
        number = number.substr(4);

        a.attr('href', '#');
        a.attr('data-dial', number)
        a.addClass('click-to-dial');
    } else {
        number = a.attr('data-dial');
    }

    //...
};

$(document).on('mousedown', "a[href^='tel']", click2dial_Event);
$(document).on('mousedown', '.click-to-dial', click2dial_Event);

Answer 4

這將得到的電話號碼給a標簽開始與價值tel當點擊它。

$("a[href^='tel']").on("click", function(e) {  
    var hrefText = this.getAttribute("href");
    var str = hrefText;
    var res = str.split(":");
    alert(res[1]);
});

Answer 5

初始加載時

我首先建議您在將任何事件綁定到元素之前，等待初始DOM准備就緒 。

// DOM ready shorthand
$(function() {
  $("a[href^='tel']").on('click', function(e) {  
    // Do work here
  });
});

AJAX內容

如果要在初始加載后添加其他元素，則還必須將事件綁定到那些新元素。

您還可以執行一些操作，例如將數據屬性添加到綁定了單擊事件的元素上，然后僅添加到尚未具有該數據屬性的元素上-但這是額外的不必要的工作。

完整的示例代碼

// DOM Ready Shorthand
$(function() {
  // Click Handler
  function clickEvent(e) {
    // Do work here
  }

  // Bind click event to initial tels
  $("a[href^='tel']").on('click', clickEvent);

  // Arbitrary AJAX request for demonstration (wherever yours may be)
  $.ajax('/newContent')
    .done(function(html) {
      // Adding our response HTML to the page within #someElement
      $('#someElement').append(html);
      // Bind click event to the new tel elements scoped to the returned html
      $("a[href^='tel']", html).on('click', clickEvent);
    });
});