停止属性的href来改变页面

时间:2014-01-15 02:10:25

标签: javascript html html5

我的问题是这个,我使用Ajax加载我的页面,所以我不希望href在我点击链接时更改页面,但是如果我网站上的用户想要复制链接到页面我仍然想要它的功能。所以我不想摆脱href。我有什么选择?

当前代码:

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

1 个答案:

答案 0 :(得分:0)

您可以在event.preventDefault代码的点击功能中使用<a>

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.
  });
}

<强> Live demo (click).

我使用的样本标记:

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