Question

我在text content中有boxed和div个元素，但当我点击boxed元素时仍然会发生更改，而我只需要在点击时进行更改text content。

以下是代码：https://jsfiddle.net/Issact/u0g8LLLo/

<div>
some text
<span class="box"></span>
</div>

<div>
some text
</div>

<div><span class="box"></span></div>

JS：

$(document).on('click','div', function(){
    if (!$(this).text().trim().length > 0) {
        $(this).text("foo");
    } else {
    $(this).append('<span>You clicked on a text</span>');
    }

});

Answer 1

将事件处理程序绑定到节点或使用事件委派时，this指的是事件绑定到的节点（或on的情况下委托给的节点）。

点击第一个.box元素中的div，将div设为this。由于div元素包含文本，因此结果错误。

相反，你应该得到event target。目标是点击的实际元素。

$(document).on('click', 'div', function(e) {

  var $target = $(e.target); // the event target
  
  if (!$target.text().trim().length > 0) {
    $target.text("foo");
  } else {
    $target.append('<span>You clicked on a text</span>');
  }

});

.box {
  background-color: green;
  height: 50px;
  width: 50px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  some text
  <span class="box"></span>
</div>

<div>
  some text
</div>

<div><span class="box"></span></div>

Answer 2

只要你有id和类，你就可以尝试比较id或类

docker := {
  assembly.value
  docker.value
}

<强> https://jsfiddle.net/q6vbohxm/

Answer 3

这是你应该做的。因为这选择了body元素和body中有文本的任何元素，所以会进入if语句，如果你也需要elese语句，你可以在if之后添加。

$(document).on('click','body', function(e){
   var clickedTag, text;
   clickedtag = e.target;
   text = $(clickedtag).text().trim();
   if(text.length > 0){
     console.log(text);
   }
});

Answer 4

将您的文本包装在单独的元素中并触发该元素上的click事件，并使用.stopPropagation（）方法......

  $("#demo").click(function(event){
    event.stopPropagation();
    alert("your text element was clicked");
  });

Answer 5

这是因为事件冒泡而发生的，所以我们需要阻止它。 Jquery有方法来阻止它event.stopPropagation();。在这里，我使用div *选择器来阻止div内所有子元素的触发事件。您可以使用任何类来区分其他div

，而不是div

$(document).on('click','div', function(){


    $(this).append('<span>You clicked on a text</span>');

    
}).on("click","div *", function(e){e.stopPropagation();});

.box {
  background-color:green;
  height:50px;
  width:50px;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
some text
<span class="box"></span>
</div>

如何通过单击文本内容区域来检测HTML元素是否有文本？

5 个答案: