Javascript 单击Div和更具体的元素

我有一个div，它有一个click（）操作，可以在其他元素上生成一些动画。这一切都很好

问题是此div中的某些链接已停止工作

例如，下面是一个简化的示例：

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

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

$（文档）.ready（函数（）{
$（'div.clickable-div'）。单击（函数（）{
...
});
});

单击该链接时，如何运行我的_函数

另一个需要考虑的问题是，clickable-div中有纯文本和图像。我希望在单击这些项目时仍然触发.clickable-div

编辑：

---

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

也许我误解了这个问题，但看起来您只需要指向另一个选择器，还需要删除

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();
   }

});

$（'div.clickable-div a'）。在（'click'，函数（）{
//做你在这里已经做过的事情，只有在没有邮件的情况下
如果（$（this.attr（'href'）.indexOf（'mailto'）请查看此处：

代码

$('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");   
});

还可以在此处查看事件冒泡：

希望对您有所帮助
提示：不要使用内联JavaScript。您能创建一个JSFIDLE示例来说明这个问题吗？您所发布的内容还不够。感谢您提供有关
onclick
actions.good的信息。也感谢
stopPropagation（）
提示。