[英]EventListener not working with anchor tel:XXXXXXXXX
I have a tag with href="tel:XXXXXXXXX"
, and I need catch the click event. 我有一个带有
href="tel:XXXXXXXXX"
的标签,并且需要捕获click事件。
I have tested the following code on chrome: $(document).on('click',console.log)
. 我已经在chrome上测试了以下代码:
$(document).on('click',console.log)
。 If i click on this tag browser it calls the application, but does not trigger a click
event. 如果我单击此标签浏览器,它将调用该应用程序,但不会触发
click
事件。
$("a[href^='tel']").on('click', console.log);
This is working, but I my have a problem with content load by ajax. 这是可行的,但是我对ajax的内容加载有问题。 My code has loaded a page and after some time application added content by ajax.
我的代码已加载页面,一段时间后应用程序通过ajax添加了内容。 When i use
$(document).on('click', ("a[href^='tel']", console.log)
, there is a problem. 当我使用
$(document).on('click', ("a[href^='tel']", console.log)
,出现了问题。
$("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"));
});
This will bind an event listener to all click on a
tags with a href
attribute and prevent the click itself. 这会将事件侦听器绑定到具有
href
属性a
标签上a
所有点击,并阻止点击本身。 After click, you'll be able to use your console to see which element was click and what href
was used. 单击后,您将能够使用控制台查看单击了哪个元素以及使用了哪个
href
。
i think this will help 我认为这会有所帮助
$("a").click(function(e) {
e.preventDefault();
alert('clicked');
window.location.href = 'tel:+496170961709';
});
Ok, i found resolve. 好的,我找到了解决方案。 I use earlier event "mousedown" and change attr "href" to "only number" for disable action click.
我使用较早的事件“ mousedown”,并将属性“ href”更改为“ only number”以禁用操作单击。
Code: 码:
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);
This would get the phone number from the a
tag starting with a value of tel
upon clicking it. 这将得到的电话号码给
a
标签开始与价值tel
当点击它。
$("a[href^='tel']").on("click", function(e) {
var hrefText = this.getAttribute("href");
var str = hrefText;
var res = str.split(":");
alert(res[1]);
});
I would first recommend that you wait for the initial DOM to be ready before binding any events to elements. 我首先建议您在将任何事件绑定到元素之前,等待初始DOM准备就绪 。
// DOM ready shorthand
$(function() {
$("a[href^='tel']").on('click', function(e) {
// Do work here
});
});
If you are adding additional elements after the initial load you will have to bind events to those new elements as well. 如果要在初始加载后添加其他元素,则还必须将事件绑定到那些新元素。
You could also do something like adding a data attribute to the elements that you've bound click events to and only add to ones that don't yet have that data attribute - but that's additional unnecessary work. 您还可以执行一些操作,例如将数据属性添加到绑定了单击事件的元素上,然后仅添加到尚未具有该数据属性的元素上-但这是额外的不必要的工作。
// 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);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.