13

我知道以前有人问过这个问题，但我什至无法完全了解如何在一次单击中添加我的特定功能的语法。

当前的点击代码：

<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 事件中吗？

4

3 回答 3

20

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

注意：使用 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
});

检查小提琴

于 2013-06-19T23:28:59.647 回答
2

尝试替换“return false;” 使用“event.preventDefault();”。这应该让事件向上传播，以便触发点击处理程序，但仍会阻止 a-href 导航。

于 2013-06-19T23:29:02.177 回答
0

通常认为使用该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>
于 2013-06-19T23:32:05.330 回答