首页 文章

将JavaScript代码放在<a>中的不同方法之间有什么区别？

提问于
浏览 次
77

我已经看到了将JavaScript代码放在 <a> 标记中的以下方法：

function DoSomething() { ... return false; }

  • <a href="javascript:;" onClick="return DoSomething();">link</a>

  • <a href="javascript:DoSomething();">link</a>

  • <a href="javascript:void(0);" onClick="return DoSomething();">link</a>

  • <a href="#" onClick="return DoSomething();">link</a>

我理解尝试放置有效URL而不仅仅是JavaScript代码的想法，以防用户没有启用JavaScript . 但是为了讨论的目的，我需要假设启用了JavaScript（没有它就无法登录） .

我个人喜欢选项2，因为它可以让你看到将要运行的内容 - 在调试传递给函数的参数时特别有用 . 我已经使用了很多，并没有发现浏览器问题 .

我读过人们推荐4，因为它给了用户一个真实的链接，但实际上，＃不是“真实的” . 它绝对不会在哪里 .

当您知道用户启用了JavaScript时，是否有一个不支持或非常糟糕？

相关问题：Href for JavaScript links: “#” or “javascript:void(0)”? .

javascript html href

7 回答

  • 1

    我非常喜欢Matt Kruse's Javascript Best Practices article . 在其中，他声明使用 href 部分执行JavaScript代码是一个坏主意 . 即使您已声明您的用户必须启用了JavaScript，但如果有人在登录后关闭了JavaScript，那么_976451会有一个简单的HTML页面，您的所有JavaScript链接都可以指向他们的 href 部分 . 我会高度评价鼓励你仍然允许这种后备机制 . 这样的事情将遵循"best practices"并实现您的目标：

    <a href="javascript_required.html" onclick="doSomething(); return false;">go</a>
    回复于
  • 0

    为什么要在使用 addEventListener / attachEvent 时执行此操作？如果没有 href -equivalent，请不要使用 <a> ，请使用 <button> 并相应地设置样式 .

    回复于
  • 10

    你忘了另一种方法：

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

    使用JavaScript代码：

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

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

    回复于
  • 1
    <a href="#" onClick="DoSomething(); return false;">link</a>

    我会这样做，或者：

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

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

    回复于
  • 3

    方法＃2在FF3和IE7中有语法错误 . 我更喜欢＃1和＃3方法，因为＃4使用'＃'来弄脏URI虽然导致更少的输入...显然，正如其他响应所指出的，最好的解决方案是从事件处理中单独的html .

    回复于
  • 64

    仅限现代浏览器

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

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

    资料来源：

    回复于
  • 4

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

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

    还有这个：

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

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

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

    那么对于第一个例子， act2 将在 act1 之前运行，而在第二个例子中，它将是另一种方式 .

    回复于

相关问题