jquery - 内部 div 上未调用单击事件

Question

我需要编写 jQuery 代码，当我单击 div 上的任意位置时，我将其称为 jQuery 事件，当他们单击此 div 内的特定项目时，不要调用 click 事件。“睾丸”类不应该调用点击。

但是，我必须使用的结构如下，因为它是一个特定的 jQuery。

下面是代码：

HTML：

<div class="tiles red">
    <div class="live-tile" id="tile1" data-mode="flip">        
        <div>
            <div class="testes"><a class="full" href="#"><p>* CNAE<br /></a></div>* CBO<br />* CID-10<br /></p>
            <span class="tile-title"><p>Clique para voltar</p></span>
        </div>
        <div>
            <p>Cadastros básicos</p>
            <span class="tile-title">back title</span>
        </div>
    </div>    
</div>

查询：

$(function () {
  $(".live-tile").click(function () {
    $(this).liveTile('play');                
  });
});

谢谢

Answer 1

尝试使用event.stopPropagation()：

$(function () {
  $(".live-tile").click(function () {
    $(this).liveTile('play');                
  });

  $(".testes").click(function (e) {
    e.stopPropagation();                
  });
});

Answer 2

您可以.bind()将事件添加到您的元素并防止冒泡：

$(".live-tile").bind("click", function(){
    $(this).liveTile('play');                
}, false)

这种形式bind()是 jQuery 函数的形式：

.bind( eventType [, eventData ], preventBubble )

Answer 3

当我将代码放在 JS fiddle 中时，其他一些人回答了您的问题。但是，这里具体介绍如何为您的代码执行此操作。

$(function () {
$(".live-tile").click(function () {
    alert(".live-tile");              
});

$(".testes").click(function(e) {
    alert(".testes");
    e.stopPropagation();
});
});

有关事件冒泡和停止传播的更多信息。