[英]Stop attribute's href from changing page
My problem is this, I am using Ajax to load my pages and so I don't want the href to change the page when I click on a link, however if a user on my site wanted to copy a link to that page I still want it to function. 我的问题是,我正在使用Ajax加载页面,因此,当我单击链接时,我不希望href更改页面,但是,如果我网站上的用户想要将链接复制到该页面,我仍然希望它起作用。 So I do not want to get rid of the href. 因此,我不想摆脱href。 What are my options? 我有什么选择?
Current Code: 当前代码:
<html>
<head>
</head>
<body>
<a href="bar.html" id='click'>Click to change url to bar.html</a>
</body>
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url() {
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>
</html>
You can use event.preventDefault
in the click function for the <a>
tag. 您可以在<a>
标记的click函数中使用event.preventDefault
。
var elems = document.querySelectorAll('.myDisabledLink');
for (var i=0; i<elems.length; ++i) {
addClickFunc(elems[i], i);
}
function addClickFunc(elem, i) {
elem.addEventListener('click', function(event) {
event.preventDefault();
console.log(elem.href);
//do whatever else you need to do.
});
}
The sample markup I used: 我使用的示例标记:
<a href="some/place" class="myDisabledLink">Click me!</a>
<a href="a/link" class="myDisabledLink">Click me!</a>
<a href="another/link" class="myDisabledLink">Click me!</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.