单击 Div 和更具体的元素 [重复]答案

【问题标题】：Click on Div and More Specific Elements [duplicate]单击 Div 和更具体的元素 [重复]
【发布时间】：2013-06-10 01:53:42
【问题描述】：

我有一个 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。我宁愿两者都不兼得。

【问题讨论】：

提示：不要使用内联 JavaScript。您可以创建一个说明问题的 jsFiddle 示例吗？您发布的内容不足。

标签： javascript jquery html

【解决方案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();
   }

});

【讨论】：

感谢您提供有关 onclick 操作的信息。

【解决方案2】：

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

代码

$('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

希望对你有帮助

【讨论】：

太棒了。也感谢stopPropagation() 的提示。