jquery - jquery单击容器但免除包装元素

Question

我正在使用 jquery Isotope 并有一个包含另一个 div 的元素 div。这些是瓷砖 - 其中有很多。

<div class=element > blah blah
<div class=setStamp>load X text</div>
blah blah blah blah
</div>
<div class=element > blah blah
<div class=setStamp>load Y text</div>
blah blah blah blah
</div>

所有 .element 上都有一个切换类“大”的单击触发器我希望能够单击 setStamp 而不是触发切换。到目前为止，我最好的方法是双击。

$container.delegate( '.element', 'dblclick', function(){ // enlarge clicked element
$(this).toggleClass('large');
$container.isotope('reLayout');
});

但我想保持简单的单击。我正在试验！.not() 和一般看。有什么建议么？

Answer 1

$container.on('click', '.element', function(){ // enlarge clicked element

   $(this).toggleClass('large');
   $container.isotope('reLayout');

}).on('click', '.setStamp', function( e ){

   e.stopPropagation();

});

演示

或者也喜欢：

$container.on('click', '.element', function( e ){ // enlarge clicked element

   if(e.target.className=='setStamp') return;

   $(this).toggleClass('large');
   $container.isotope('reLayout');

});

演示