Question

我有一个看起来像这样的按钮：

<button type="button" class="btn btn-primary" id="yes">
    <i class="fa fa-check" aria-hidden="true"> Yes</i> 
</button>

由于某种原因，按钮内的图标变为可点击。所以如果我点击图标就会返回错误。但如果我点击按钮的其余部分就可以了。

如果您有兴趣，这里是Javascript。

$('[id^=yes]').on('click', function(e) {
    console.log(e.target);
});

有什么线索？

Answer 1

您的代码中缺少);。

确保在脚本代码之前添加了jQuery库。

检查以下内容： -

$(document).ready(function(){
  $('[id^=yes]').on('click', function(e) {
      console.log(e.target);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" id="yes">
    <i class="fa fa-check" aria-hidden="true"> Yes</i> 
</button>

工作小提琴： - https://jsfiddle.net/7asu7rcc/

注意： - 如果您的脚本代码位于页面顶部，请将代码包含在$(document).ready(function(){...});内。如果它位于页面底部，则不需要。

如果您希望该文字无法点击，请使用： -

.fa-check { pointer-events: none }

Answer 2

由于按钮内的<i>标记，它将是可点击的。但是，如果你想点击<i>标签点击按钮并点击停止按钮点击事件，你可以得到如下所示的解决方案

$('[id^=yes]').on('click', function(e) {
    if(!$( event.target ).is( "i" )){
      console.log("button clicked");
    }
});
 
 $('[id^=yes-i]').on('click', function(e) {
    e.stopPropagation();
    console.log("i tag clicked");
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary" id="yes">
    <i id="yes-i" class="fa fa-check" aria-hidden="true"> Yes</i> 
</button>

<i>标签在按钮元素内变为可点击

2 个答案: