0

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

4

2 回答 2

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

});
于 2013-06-13T15:35:13.027 回答
1

看看这里：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

希望能帮助到你

于 2013-06-13T15:43:07.660 回答