单击内部div上未调用的事件

Question

我需要编写jQuery代码，当我在div上的任何地方单击时，我将其称为jQuery的事件，而当他们在此div中的特定项上单击时，不要调用单击事件。"testes“类不应该调用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>

JQuery：

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

在我拼凑code in JS fiddle的时候，其他一些人回答了你的问题。但是，这里特别介绍了如何为您的代码执行此操作。

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

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

More info on event bubbling and stopping propogation.