jQuery - 如果点击了 DIV 中的文本

Question

我有一些DIV。这些DIV中包含一些文本、图像、标签等...当单击文本时，我需要显示"alert"。不是图像，不是其他标签，也不是其他标签中的文本...只是DIV中的文本。如何使用jQuery实现？

jsFiddle示例。

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;
}

- Patrik

---

@user1232020 这与本问题完全无关。 - Anthony Grist

Answer 1

检查源的类型，如果是div，则意味着文本直接由div包装。如果您想包含类似于em的标记，则可以在条件中添加这些标记。 演示链接

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

- Adil

---

这真的是最好的答案。它不需要对HTML进行任何更改，并且使用最少量的事件处理程序。它不能处理嵌套的<div>元素，但问题并没有表明这是一个要求或可能性，因此无需这样做。 - Anthony Grist

Answer 2

你可以使用一些jQuery的技巧来查看

的子元素，但是我建议你在你的div里添加一个或并给它一个类/ID：

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

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

http://jsfiddle.net/meNJu/

提供的示例展示了如何使用children()方法以及上述提到的方法。

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

演示如何使用类而不是 ID。

- Darren

---

最好使用类，因为页面上每个元素的“id”属性应该是唯一的。 - Anthony Grist

@AnthonyGrist 确定。已调整。 - Darren

Answer 3

你可以阻止来自所有 div 子元素的事件传播：

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

更新的 fiddle。

- Konstantin Dinev

Answer 4

使用 class 为 text 的 Span 是否可行？

以下是代码：

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

（该回答来自手机，未经测试的代码。在电脑上进行拼写检查后再发布）

- Mark Jones

---

事后来看，你可以使用 would.. $('div').text().click(function {})。工作。 - Mark Jones

Answer 5

这很简单：

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

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

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

演示

- palaѕн

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()):
});

这只是一个非常简单的例子，但它可能会对您有所帮助

- Fernando Valente

---

将冒号改为分号。 - TawabG