Question

我有一个像这样设置的媒体对象：

<div class="row chatrow" userid='123'>
     <div class="media">
          <a class="pull-left" href="#">
              <img class="media-object img-circle" src='image1.png' style="display: block;">
          </a>
         <div class="media-body">
             <h4 class="media-heading">User 1</h4>
             Hello, how are you doing?
         </div>
    </div>
</div>

点击.chatrow后，用户将被定向到使用javascript的新页面。但是，我想允许用户点击图像，而不是被定向，而是显示某些内容。目前我尝试过：

$('a').on('click',function() {
    console.log('yes');
})
$('.chatrow').on('click',function() {
    window.location.href = "chat.php?id=" + $(this).attr('userid');
})

但是每次点击它都会重定向。是否可以防止直接点击图像？

Answer 1

您需要使用stopPropagation方法阻止事件冒泡：

$('a').on('click', function(e) {
    alert('link');
    e.stopPropagation();
});

$('.chatrow').on('click', function() {
    alert('chatrow');
    //window.location.href = "chat.php?id=" + $(this).attr('userid');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row chatrow" userid='123'>
     <div class="media">
          <a class="pull-left" href="#">
              <img class="media-object img-circle" src='http://lorempixel.com/100/100/abstract/1' style="display: block;">
          </a>
         <div class="media-body">
             <h4 class="media-heading">User 1</h4>
             Hello, how are you doing?
         </div>
    </div>
</div>

通常点击事件（和其他人）冒泡，这意味着事件沿着DOM树向上移动，直到它到达HTML根目录。您可以使用stopPropagation阻止此行为。

Answer 2

您需要在标记http://jsfiddle.net/cuxuLard/1/

上使用return false语句

    $('a.pull-left').on('click',function(e) {
        console.log('yes');
        return false;
    })
    $('.chatrow').on('click',function() {
        //window.location.href = "chat.php?id=" + $(this).attr('userid');
        console.log('chatrow');
    });

返回false;防止该事件传播（或“冒泡”） DOM。你可能不知道这一点是每当一个事件发生在一个元素上，该事件在每个父元素上触发元素也是。所以假设你的盒子里面有一个盒子。两个盒子有点击事件。点击内框，点击一下即可除非你阻止传播，否则也会在外盒上触发。

来源：The difference between ‘return false;’ and ‘e.preventDefault();’

JQuery可点击图片+容器分开

2 个答案: