Question

假设我有以下链接：

<a href="#" onclick="alert('You clicked a link.');">Click Me!</a>

点击此链接会提醒消息，并在页面末尾添加井号。
除了在网址本身使用javascript之外，有什么方法可以避免它，这看起来不是很漂亮：

<a href="javascript:alert('You clicked a link.');">Click Me!</a>

Answer 1

您必须阻止发生默认响应。

老式的方法是从return false开始：

<a href="#" onclick="alert('You clicked a link.'); return false;">Click Me!</a>

或者，更好：

<a href="#" id="myLink">Click Me!</a>

<script type="text/javascript">
window.onload = function() {
   document.getElementById('myLink').onclick = function(event) {
      alert('You clicked a link.');
      return false;
   };
};
</script>

现在最好的方法是调用event属性的正确方法：

<a href="#" id="myLink">Click Me!</a>

<script type="text/javascript">
window.onload = function() {
   document.getElementById('myLink').onclick = function(event) {
      alert('You clicked a link.');
      event.preventDefault(); // <---
   };
};
</script>

对于不使用JavaScript的用户，最好将#替换为某个正确页面的URI。在某些司法管辖区，可访问性实际上是法律要求。

编辑修复了出血'IE：

function f() {
   document.getElementById('myLink').onclick = function(e) {
      alert('You clicked a link.');

    if (!e) {
       var e = window.event;
    }

    // e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue  = false;

    // e.stopPropagation works only in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
};

window.onload = f;

Answer 2

事件处理程序上的技巧是return false。

<a href="" onclick="alert('You clicked a link.'); return false">Click Me!</a>

href =“＃”在页面末尾添加＃

2 个答案: