javascript - 在文档上单击以标识文本，图像或div

当我单击时，我想确定正在单击的内容。是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>

最佳答案

在任何事件侦听器中，您都可以访问将自动传递给侦听器的事件对象。事件对象具有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>