Question

我有一个div，它有一个click（）动作，可以在其他一些元素上引起一些动画。这一切都运作良好。

问题是这个div中有一些链接已停止工作。

例如，这是一个简化的例子：

<div class="clickable-div">
    <a href="#" onclick="javascript:my_function();">
</div>

$(document).ready(function() {
  $('div.clickable-div').click(function() {
      ...
  });
});

点击该链接后，如何运行my_function？

另一个考虑因素是clickable-div中有纯文本和图像。我想在点击这些项目时仍然触发.clickable-div。

编辑：

另一件奇怪的事情。这个div中有一个mailto链接。当我点击mailto链接时，我的浏览器会执行mailto操作（在我的邮件客户端中打开一个撰写窗口），但它也会执行.clickable-div.click。我希望它不会同时做到这两点。

Answer 1

也许我误解了这个问题，但看起来你只需要指向一个不同的选择器，同时删除onclick=""，然后简单地将该函数放在jQuery click事件处理程序中。

此外，您希望将JS与HTML分开（这是最佳做法）。 onclick事件还会在IE8等旧版浏览器中创建内联脚本，并且会降低性能。

<div class="clickable-div">
    <a href="#">
</div>

$('div.clickable-div a').on('click', function () { 

   // do the things you already had here, only if there is no mailto
   if ($(this).attr('href').indexOf('mailto') <= -1) {

       e.preventDefault(); // this will prevent the mailto

       // now run your my_function animations
       my_function();
   }

});

Answer 2

看看这里：http://jsfiddle.net/J2jMV/

<强> CODE

$('div.clickable-div').click(function() {
    alert("I'm not your function");
});
$('div.inner').click(function(e) {
    e.stopPropagation();
    alert("I'm INNER!");
});
$("#clickme").click(function(e){
    e.stopPropagation();
    alert("Hello my function");   
});

还可以查看事件冒泡：http://javascript.info/tutorial/bubbling-and-capturing

希望有所帮助

单击Div和更多特定元素

2 个答案: