Question

我有这样的HTML：

  <a href="http://google.com" class="extended-link">
    <span class="extended-span" data-comment-href="http://example.com">text</span>
  </a>

和css：

.extended-link {
  display: inline-block;
  background: green;
  width: 200px;
  height: 500px;
  text-align: center;
}

.extended-span {
  display: inline-block;
  background: yellow;
  margin: 100px 0 0 0;
}

和js：

$('.extended-span').click(function(event) {
  event.stopPropagation();
  window.location.href = $(this).attr('data-comment-href');
});

但是我无法抓住.extended-span点击，它总是触发外部链接重定向。

是否可以捕获链接中的点击（链接必须是可点击的，除了跨度）

Plunker

Answer 1

尝试event.preventDefault();而不是event.stopPropagation();

Answer 2

event.stopPropagation()：阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

event.preventDefault()：如果调用此方法，则不会触发事件的默认操作。

在您的情况下，您必须使用第二个event.preventDefault()，因为您希望阻止默认操作并触发另一个自定义操作。

＆＃13;

$('.extended-span').click(function(event) {
  event.preventDefault();
  window.location.href = $(this).attr('data-comment-href');
});

＆＃13;

.extended-link {
  display: inline-block;
  background: green;
  width: 200px;
  height: 500px;
  text-align: center;
}

.extended-span {
  display: inline-block;
  background: yellow;
  margin: 100px 0 0 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com" class="extended-link">
    <span class="extended-span" data-comment-href="http://example.com">text</span>
</a>

＆＃13;

希望这有帮助。

Answer 3

找到以下代码更正：

$(document).ready(function (){

$（＆＃39; .extended-span＆＃39;）。click（function（event）{

window.location.href = $（this）.attr（＆＃39; data-comment-href＆＃39;）;

返回false; }）;

}）;

jQuery：抓住链接里面的点击

3 个答案: