jQuery嵌套单击事件

Question

我有以下标记：

<div data-href="http://www.xxxxxxxxxxxxx.com/xxxxxxxx.php/Mediterranean-Youth-Hostel/Barcelona/6053" data-id="6053" class="property-wrapper row">
    <div class="columns large-4 medium-4">v
        <img class="recent-viewed-img" src="http://ucd.xxxxxxxxx.com/propertyimages/6/6053/107.jpg" alt="">
    </div>
    <div class="columns large-8 medium-8">
         <div class="info">
             <span class="city">Barcelona</span>
             <span class="close right">x</span>
         </div>
         <span class="hostel-title">Mediterranean Youth Hostel</span>
         <div class="rating">
             <span class="number">9.1</span>
             <span class="text">Fabulous</span>
         </div>
         <div class="bottom-info">
             <span class="price-from">From €9.90</span>
             <div class="icon_freewifi right">
                 <i class="fa fa-wifi"></i>Free WiFi
             </div>
        </div>
    </div>
</div>

2个js函数，2个不同的点击事件，如下所示：

这允许您单击all行并转到另一个页面：

$('.property-wrapper .columns').on('click', function(){
    window.location.href = $(this).parent().data('href');
});

下面的代码简单地关闭并删除您刚才单击的行：

  $('body').on('click', '.close.right', function(){
    $(this).parent().parent().parent().fadeOut(200, function(){
      CRO_106_removePropertyFromCookie($(this));
      CRO_106_hideOverlayIfNoPropertiesLeft();
    });
  });

问题是，当在.close.right上时，它也会转到另一个页面。

2个单击事件是冲突的。

我可以编辑标记，我尝试过使用"a“包装器，但也不起作用。

Answer 1

您需要检查绑定到.property-wrapper .columns的click处理程序内部的event.target，如果它是.close.right，则可以防止重定向发生：

$( '.property-wrapper .columns' ).on( 'click', function( evt ) {
    if ( $( evt.target ).is( '.close.right' ) ) {
        return true;
    }
    window.location.href = $( this ).parent().data( 'href' );
} );

不能在绑定到body的处理程序中使用event.stopPropagation()，因为上面的单击处理程序已经触发，并且重定向已经发生。

Here's a fiddle which demonstrates this和here's a fiddle with the proposed solution