Question

我有一些DIV。在这些DIV中有一些文本，图像，标签......当需要点击文本时，我需要显示“警报”。不是图像，不是其他标签，不是其他标签中的文本......只是DIV内的文本。如何用jQuery做到这一点？

HTML

<div style="background-color:PapayaWhip;">Some text. 
 <img src="http://ynternet.sk/test2/close_1.jpg" /> 
 <img src="http://ynternet.sk/test2/close_2.jpg" /> 
</div> 
<div style="background-color:Moccasin;">This are letters 
 <em>and this are not.</em> 
 Hello again!
</div> 
<div style="background-color:LightGoldenRodYellow;">
 <img src="http://ynternet.sk/test2/close_1.jpg" />
 <img src="http://ynternet.sk/test2/close_2.jpg" />
 Letters in new line.
 <img src="http://ynternet.sk/test2/close_1.jpg" />
 <img src="http://ynternet.sk/test2/close_2.jpg" /> 
</div> 
<div style="background-color:Wheat;">New letters in another line.</div>

CSS

div {
  padding:10px 0px 0px 20px;
  font-family:Verdana;
  height:40px;
}
em{
  color:red;
}

Answer 1

检查源的类型是否为div然后它意味着它将由div直接包装文本。如果您想要包含em等模式标记，则可以添加条件。

<强> Live Demo

$('div').click(function(evt){  
    if(evt.target.tagName == 'DIV')
        alert("div clicked");
});

Answer 2

你可以使用一些jQuery魔法并查看div的子项，但是我会在你的div中添加span或label并给它一个类/ id：< / p>

<span class="letters">
  Letters in new line
</span>

$(".letters").click(function() {
    alert('Clicked');
});

http://jsfiddle.net/meNJu/

提供的小提琴演示如何将其与children()以及上述方法一起使用。

http://jsfiddle.net/meNJu/1/

演示使用类而不是ID。

Answer 3

您可以停止来自div的所有子项的事件传播：

$('div').click(function (event) {
    alert('Text');
});
$('div').children().click(function (event) {
    event.stopPropagation();
});

Updated fiddle.

Answer 4

使用a是不可行的跨越班级文本

使用此代码

$(".text").click(function() {
 alert("Handler for click() called.");
});

（通过电话发布的答案，未经测试的代码。帖子将在电脑上进行一次拼写检查）

Answer 5

这很简单：

$('div').click(function (e) {

    if ($(this).children().length === 0) {
        // do something
        alert($(this).text());
    }
});

$('div').children().click(function (event) {
    event.stopPropagation();
});

Demo

Answer 6

好吧，如果我理解你正在尝试做什么，你需要做以下事情：

HTML

<div>
    <span class="click">This are letters</span>
    <em>and this are not.</em> 
    Hello again!
</div>

jQuery的：

$('.click').on('click', function(){
    alert($(this).html()):
});

这只是一个非常简单的例子，但它可以帮助你

jQuery - 如果单击DIV中的文本

6 个答案: