当我单击时，我想确定正在单击的内容。是Text还是Image还是外面的Div。根据结果，我要显示警报消息。
这是我准备的jsfiddle，但我不知道如何在if条件下识别相同的东西。
$(document).on("click", function() {
//when clicked want to know if i clicked image or text or div and accordingly show alert
alert("clicked div");
alert("clicked image");
alert("clicked text");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pouter">
<div id="change_color" class="jumbo text-center context_menu" style=" padding:20px; " >
<div class="col-md-12 context_image sim-row-edit">
<img src="https://cdn3.iconfinder.com/data/icons/forum-emoticons-20x20/20/Verlegen.png" class="imgtop sim-row-edit"></div>
<h1 class="sim-row-edit" contenteditable="true">My First Bootstrap Page 1</h1>
<p contenteditable="true">Resize this responsive page to see the effect!</p>
</div>
<div class="container cont context_menu sim-row-edit">
<div class="row"><div class="col-md-4 context_menu">
<div class="row"><div class="col-md-3 context_image">
<img src="https://cdn3.iconfinder.com/data/icons/forum-emoticons-20x20/20/Verlegen.png" class="imggbot sim-row-edit"></div>
<div class="col-md-9 small-heading context_menu sim-row-edit context_intLink">
<span class="sim-row-edit">Column 1</span></h3></div><div class="col-md-12 sim-row-edit"><p class="smalltxt-p0 sim-row-edit" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p><p class="smalltxt-p0 sim-row-edit" contenteditable="true">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div></div></div>
</div>
</div>
</div>
答案 0 :(得分：3)
在任何事件侦听器中，您都可以访问将自动传递给侦听器的事件对象。事件对象具有target属性，该属性持有对引发事件的元素的引用：
document.addEventListener('click', (e) => {
const clickedTag = e.target.tagName.toLowerCase()
switch (clickedTag) {
case 'div': alert('div clicked!'); break;
case 'p': console.log('you clicked on a paragraph'); break;
case 'img': console.log('this time it was an image that was clicked.'); break;
default: console.log(`${clickedTag} clicked`);
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pouter">
<div id="change_color" class="jumbo text-center context_menu" style=" padding:20px; ">
<div class="col-md-12 context_image sim-row-edit">
<img src="https://cdn3.iconfinder.com/data/icons/forum-emoticons-20x20/20/Verlegen.png" class="imgtop sim-row-edit"></div>
<h1 class="sim-row-edit" contenteditable="true">My First Bootstrap Page 1</h1>
<p contenteditable="true">Resize this responsive page to see the effect!</p>
</div>
<div class="container cont context_menu sim-row-edit">
<div class="row">
<div class="col-md-4 context_menu">
<div class="row">
<div class="col-md-3 context_image">
<img src="https://cdn3.iconfinder.com/data/icons/forum-emoticons-20x20/20/Verlegen.png" class="imggbot sim-row-edit"></div>
<div class="col-md-9 small-heading context_menu sim-row-edit context_intLink">
<span class="sim-row-edit">Column 1</span></h3>
</div>
<div class="col-md-12 sim-row-edit">
<p class="smalltxt-p0 sim-row-edit" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p class="smalltxt-p0 sim-row-edit" contenteditable="true">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：1)
因为它被标记为[jquery]并在示例中使用jquery，所以您可以使用.is()来检查所单击的元素是否为特定的节点类型（它不仅仅需要与类/伪类一起使用。 ）
if ($(event.target).is("div"))
示例片段（请注意，这仅是示例，可以很容易地整理/提高效率）
$(document).on("click", function(event) {
//when clicked want to know if i clicked image or text or div and accordingly show alert
if ($(event.target).is("div"))
console.log("div clicked")
else if ($(event.target).is("span"))
console.log("span clicked")
else if ($(event.target).is("p"))
console.log("p clicked")
else if ($(event.target).is("h1"))
console.log("h1 clicked")
else if ($(event.target).is("img"))
console.log("img clicked")
else
console.log("clicked other")
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pouter">
<div id="change_color" class="jumbo text-center context_menu" style=" padding:20px; ">
<div class="col-md-12 context_image sim-row-edit">
<img src="https://cdn3.iconfinder.com/data/icons/forum-emoticons-20x20/20/Verlegen.png" class="imgtop sim-row-edit"></div>
<h1 class="sim-row-edit" contenteditable="true">My First Bootstrap Page 1</h1>
<p contenteditable="true">Resize this responsive page to see the effect!</p>
</div>
<div class="container cont context_menu sim-row-edit">
<div class="row">
<div class="col-md-4 context_menu">
<div class="row">
<div class="col-md-3 context_image">
<img src="https://cdn3.iconfinder.com/data/icons/forum-emoticons-20x20/20/Verlegen.png" class="imggbot sim-row-edit"></div>
<div class="col-md-9 small-heading context_menu sim-row-edit context_intLink">
<span class="sim-row-edit">Column 1</span></h3>
</div>
<div class="col-md-12 sim-row-edit">
<p class="smalltxt-p0 sim-row-edit" contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p class="smalltxt-p0 sim-row-edit" contenteditable="true">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
</div>
</div>
您也可以使用
$("*").on("click", function(event) {
if ($(this).is("img"))
console.log("img clicked")
....
event.stopPropagation();
});
请注意使用$("*")而不是document来捕获所有元素上的事件，并使用event.stopPropagation();的用户来停止单击冒泡。
您通常不想使这些事件冒泡，因此不希望在“真实”代码中使用此代码，因此只是一种替代方法，以显示如何在全局处理程序中使用this /等效于{{1 }}
答案 2 :(得分：0)
您可以尝试：
$(document).on("click", function(event) {
if(event.target.tagName == "IMG"){
alert("Clicked on Image");}
else if(event.target.tagName == "DIV"){
alert("Clicked on DIV");}
else if(event.target.tagName == "P" || event.target.tagName == "H1"){
alert("Clicked on TEXT");}
}）;
对于文本单击，您没有直接单击文本的方法，它会提供标签，您可以使用所有文本标签条件，也可以使用其他标签。