7 回答 7

69

我非常喜欢Matt Kruse 的 Javascript Best Practices 文章。在其中，他指出使用该href部分执行 JavaScript 代码是一个坏主意。即使您已经声明您的用户必须启用 JavaScript，但href如果有人在登录后碰巧关闭了 JavaScript，您也没有理由不能拥有一个简单的 HTML 页面，您的所有 JavaScript 链接都可以指向他们的部分。我强烈鼓励您仍然允许这种后备机制。这样的事情将遵循“最佳实践”并实现您的目标：

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
于 2008-10-29T05:35:58.320 回答
10

addEventListener当您可以使用/时，为什么要这样做attachEvent？如果没有href- 等效项，请不要使用 a <a>，使用 a<button>并相应地对其进行样式设置。

于 2008-10-29T05:24:44.740 回答
5

您忘记了另一种方法：

5: <a href="#" id="myLink">Link</a>

使用 JavaScript 代码：

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

我无法评论哪个选项具有最好的支持或哪个在语义上是最好的，但我只想说我更喜欢这种风格，因为它将你的内容与你的 JavaScript 代码分开。它将所有 JavaScript 代码放在一起，这更容易维护（特别是如果您将其应用于许多链接），您甚至可以将其放在外部文件中，然后可以将其打包以减小文件大小并由客户端浏览器缓存。

于 2008-10-29T05:25:20.353 回答
3 
<a href="#" onClick="DoSomething(); return false;">link</a>

我会这样做，或者：

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

视情况而定。对于较大的应用程序，第二个是最好的，因为它整合了您的事件代码。

于 2008-10-29T05:25:29.823 回答
1

方法 #2 在 FF3 和 IE7 中存在语法错误。我更喜欢方法#1 和#3，因为#4 用'#' 弄脏了URI，尽管会减少打字......显然，正如其他响应所指出的，最好的解决方案是将html 与事件处理分开。

于 2008-10-29T07:19:58.127 回答
1

我注意到这之间的一个区别：

<a class="actor" href="javascript:act1()">Click me</a>

还有这个：

<a class="actor" onclick="act1();">Click me</a>

如果在任何一种情况下你都有：

<script>$('.actor').click(act2);</script>

那么对于第一个示例，act2将在第二个示例之前运行，act1而在第二个示例中，它将是相反的。

于 2014-04-01T17:48:48.617 回答
1

仅限现代浏览器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

跨浏览器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

您可以在文档准备好之前运行它，单击按钮将起作用，因为我们将事件附加到文档。

资料来源：

于 2014-06-01T07:26:17.850 回答