Question

我尝试启用单击页面上的特定元素，然后单击以在该元素上设置边框。您可以在此处找到工作示例link 还有一些代码：

   <div>
      <a href="#">Test</a>
    </div>

$(document).ready(function() {
  $('a, div').on('click', function() {
    $(this).css({'border-color': 'red'});
  })
});

问题是，如果单击锚元素，div作为父元素也会获得click事件，并在那里设置边框。有没有办法将click事件限制为仅限于大多数特定元素（在本例中为锚点）？

Answer 1

您当前的选择器定位所有a和div元素。下面的选择器定位a元素中的所有div元素。更准确地说，您可以使用div > a。

$(document).ready(function() {
  $('div > a').on('click', function(e) {
    e.preventDefault();
    $(this).css({'border-color': 'red'});
  })
});

您尝试使用的构造是：jQuery( selector [, context] ) ..请参阅http://api.jquery.com/jquery/：

jQuery（selector [，context]）返回：jQuery 描述：接受包含CSS选择器的字符串，然后使用该选择器匹配一组元素。

jQuery( selector [, context ] )

selector
Type: Selector
A string containing a selector expression

context
Type: Element or jQuery
A DOM Element, Document, or jQuery to use as context

Answer 2

您可以使用event.target：

专注于所点击的元素

$('a, div').on('click', function (e) {
    e.target.style.borderColor = 'red';
});

$('a, div').on('click', function (e) {
    e.target.style.borderColor = 'red';
});

div, a {
    border: 2px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a href="#">link text</a></div>
<div><a href="#">link text</a></div>
<div><a href="#">link text</a></div>

或者，使用更多jQuery方法：

$('a, div').on('click', function (e) {
    $(e.target).css({'border-color' : 'red'});
});

$('a, div').on('click', function (e) {
    $(e.target).css({'border-color' : 'red'});
});

div, a {
    border: 2px solid transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a href="#">link text</a></div>
<div><a href="#">link text</a></div>
<div><a href="#">link text</a></div>

参考文献：

Event.target。
on()。

Answer 3

你可以停止事件传播，但是不鼓励它，因为如果用户点击/在任何地方，可能会有一些库做某事。这个更好的解决方案是：

$(document).ready(function() {
  $('a, div').on('click', function(e) {
    if (!e.isDefaultPrevented()) { //Don't do anything if we already processed that event.
      e.preventDefault();
      $(this).css({'border-color': 'red'});
    }
  })
});

Answer 4

使用

$(document).ready(function() {
  $('a, div').on('click', function() {
    if ($(this).prop('tagName').toLowerCase() == 'a') {
      $(this).css({'border-color': 'red'});
    }
  })
});

这将检查是否单击了锚元素。

Answer 5

$(document).ready(function() {
  $('div a').on('click', function() {
    $(this).css({'border-color': 'red'});
  })
});

Answer 6

您可以使用event.stopPropagation（）来阻止事件冒泡DOM树。

参考：http://api.jquery.com/event.stopPropagation/

Answer 7

问题是click事件正在从anchor标签传播到div，anchor是div的子元素，所以我们只需要停止传播。

检查以下代码：

＆＃13;

$(document).ready(function() {
  $('a, div').on('click', function(event) {
    $(event.currentTarget).css({'border-color': 'red'});
	event.stopPropagation();
  })
});

＆＃13;

div {
  padding: 50px;
  border: 1px solid #cccccc;
}

a {
  border: 1px solid #cccccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
      <a href="#">Test</a>
    </div>

＆＃13;

在单击的元素上设置border属性，而不是父元素

7 个答案: