javascript - 应用 css 图标时 preventDefault() 不起作用？

Question

想知道有没有人遇到过这种情况。每次单击工具提示时，我都会尝试 e.preventDefault()。单击它时，它会加载带有 youtube 视频的 iframe。但是，preventDefault() 在这种情况下什么都不做。我使用了一个 javascript 调试器，它找到了 spanClick() 函数。

这是发生的奇怪的事情。当我从类部分删除“fa”时，preventDefault() 起作用。因此，当 class="fa-question-circle right has-tip tip-left" 时，preventDefault 起作用并且 iframe 视频将加载。但是，不会加载 Font Awesome 问号图标，显然是因为类中缺少“fa”。

Font Awesome 图标绕过 preventDefault 或在 spanClick() 发生之前或之后创建另一个“点击”事件是否存在已知问题？

提前致谢。下面是应该相互交互的代码。

<a href="http://www.youtube.com/INSERTYTLINK"><span data-width="250px" data-tooltip="" class="fa fa-question-circle right has-tip tip-left" onclick="spanClick()" title="Watch the video for more information"></span></a>

<script type="text/javascript">
function spanClick(e) {
    e.preventDefault();
}
</script>

编辑: 当我检查 firefox 上的元素时，我注意到当点击发生时这个事件被连接起来。我可以在我的标记中更改或阻止这里的任何内容吗？

function() {
  if ($(this).parents('.sfSubscribe').length) {
    $(this).parents('.sfSubscribe').find('input:submit').click();
  } else if ($(this).parents('.sfsearchBox').length) {
    console.log('asd');
    $(this).parents('.sfsearchBox').find('input:submit').trigger('click');
  } else {
    $(this).parents('form').submit();
  }
}

Answer 1

那是因为 onclick 处理程序附加到 span 元素，它不会重定向， anchor 会重定向，必须阻止 anchor 击，而不是 span 上的点击，无论是否或不是它被阻止

您还需要将事件添加为参数

<a href="http://www.youtube.com/INSERTYTLINK" onclick="spanClick(event)"><span data-width="250px" data-tooltip="" class="fa fa-question-circle right has-tip tip-left" title="Watch the video for more information"></span></a>

<script type="text/javascript">
function spanClick(e) {
    e.preventDefault();
}
</script>

FIDDLE

也可以在 span 上使用 e.stopPropagation 停止事件冒泡