一个元素中能否有两个jquery onclick事件？

Question

我知道这个问题以前被问过，但我无法准确理解如何在一个onclick事件中添加我的特定函数的语法。

当前的onclick代码：

<a class="thumbLinkCart" href="#" onclick="simpleCart.add('name=lemon','price=7.99','image=images/thumbs/yellowgold.jpg');return false;"></a>

需要添加的第二个事件：

<script>
    $(document).ready(function() { 
      $('#demo12').click(function() { 
   $.growlUI('Item added to cart'); 
}); 
}); 
</script>

请问有人能帮我把第二个函数添加到第一个onclick事件中吗。

- user2487746

---

移除行内事件处理程序并使用jQuery绑定它们。 - Matt Ball

还要添加 id='demo12' 属性，以便 jQuery 可以找到该链接。 - metadings

谢谢，运行得非常好！ - user2487746

Answer 1

您可以将多个（类似）事件绑定到同一元素上。但是，如果您使用内联事件处理程序绑定事件，则最多只能定义一个事件。

注意：始终最好使用JavaScript绑定事件，因为它保持关注点分离并且便于维护。

相反，您可以在JS代码中将多个事件绑定到元素上，这样会更加清晰简洁。

jQuery

 $('#demo12').on('click', function() { 
    alert('1st click event');
    //  Add items to the cart here
});

$('#demo12').on('click', function() { 
    alert('2nd click event');
    //  Do something else
});

原生JavaScript

document.querySelector('#demo12').addEventListener('click', function() { 
    alert('1st click event');
    //  Add items to the cart here
});

document.querySelector('#demo12').addEventListener('click', function() { 
    alert('2nd click event');
    //  Do something else
});

查看 Fiddle

- Sushanth --

---

+1 因为这种技术使我能够对同一个元素应用两个不同的选择器来触发点击事件。(例如，按钮特定的函数和适用于所有按钮的函数)。谢谢！ - Jeremy Pridemore

@JeremyPridemore.. 很高兴能够帮助 :) - Sushanth --

@Sushanth-- 事件执行的顺序将是什么？ - irfandar

@irfandar 事件绑定的顺序。 - Sushanth --

Answer 2

尝试将"return false;"替换为"event.preventDefault();"。这样可以让事件向上传播，从而触发单击处理程序，但仍然阻止a-href导航。

- faffaffaff

Answer 3

通常认为使用onclick属性是不好的实践。它过于混杂了结构（HTML）和行为（JavaScript）。

为什么不将它们分开呢？

<a class="thumbLinkCart" href="#">Link</a>

和

<script>
  $(document).ready(function() { 
    $('.thumbLinkCart').click(function() {
      simpleCart.add('name=lemon','price=7.99','image=images/thumbs/yellowgold.jpg'); 
      $.growlUI('Item added to cart'); 
    }); 
  }); 
</script>

- hamstu

---

哇，太高效了，而且完美地运行了...非常感谢。我一定要多读一些关于JavaScript的资料... - user2487746