Question

我想在点击它们时获取标签名称，我在每个标签上都应用了一个公共类。现在的问题是，当我点击p标签或h1时，它总是给出父名称。

$(function(){
  $('.r').click(function(event) {
    // $('.r').each(function() {
    event.stopPropagation();
    var $detect = $('.r').prop('tagName');
    // alert($detect);
    console.log($detect);
  });
  // })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
	<h1 class="r">Title H1</h1>
	<p class="r">Para</p>
</div>

Answer 1

$(this)代替$('.r') -

＆＃13;

$(function() {
  $('.r').click(function(event) {

    // $('.r').each(function() {
    event.stopPropagation();
    var $detect = $(this).prop('tagName');
    // alert($detect);
    console.log($detect);
  });
  // })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
  <h1 class="r">Title H1</h1>
  <p class="r">Para</p>
</div>

＆＃13;

Answer 2

$('.r')将始终为您提供第一个元素。

所以

使用$(this)： -

＆＃13;

$(function(){
  $('.r').click(function(event) {
    event.stopPropagation();
    var $detect = $(this).prop('tagName');//$(this) will give you current clicked object
    console.log($detect);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
  <h1 class="r">Title H1</h1>
  <p class="r">Para</p>
</div>

＆＃13;

或者您也可以使用$(event.target)： -

＆＃13;

$(function(){
  $('.r').click(function(event) {
    event.stopPropagation();
    var $detect = $(event.target).prop('tagName');
    console.log($detect);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
  <h1 class="r">Title H1</h1>
  <p class="r">Para</p>
</div>

＆＃13;

event.target将提供实际执行事件的当前元素。

Answer 3

将var $detect = $('.r').prop('tagName');更改为var $detect = $(this).prop('tagName');，您就会明白。

当您使用选择器$('.r')时，默认情况下，您正在使用返回数组的第一个元素（<div class="r">）。

＆＃13;

$(function() {
  $('.r').click(function(event) {
    // $('.r').each(function() {
    event.stopPropagation();
    var $detect = $(this).prop('tagName');
    // alert($detect);
    console.log($detect);
  });
  // })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">
  <h1 class="r">Title H1</h1>
  <p class="r">Para</p>
</div>

＆＃13;

只使用prop（“tagName”）获取单击事件的父标记名称，而不是子标记。为什么？

3 个答案: