Of Stack

How JS detects which HTML tag in a page triggers a click event

  • 2021-06-28 11:14:35
  • OfStack

This article provides an example of how JS detects which HTML tag in a page triggers a click event.Share it for your reference, as follows:

In the html tag, in order to display the page beautifully, they are nested in each other. It is inevitable to add various events when making "effects", such as:
< a href="" > < span onclick="" > dddd < /span > < /a >
When the user clicks, it is sometimes necessary to determine whether the event is the result of the link or the event is the result of the span tag onclick tag. At least I think it works when debugging, so I wrote a simple demo for you to learn 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
// Get the control that triggers the event 
function test(obj){
// A tool for detecting which space triggered the event in the bottom 
  alert(window.event.srcElement.tagName);
}
</script>
<title> Untitled Document </title>
</head>
<body>
  <input type="button" value="test" onclick="test(this)"/>
  <button type="button" value="test" onclick="test(this)">ddddd</button>
  <span type="button" value="test" onclick="test(this)">span</span>
</body>
</html>

More readers interested in JavaScript-related content can view this site's topics: Summary of JavaScript Switching Effects and Techniques, Summary of JavaScript Finding Algorithmic Techniques, Summary of JavaScript Animation Effects and Techniques, Summary of JavaScript Errors and Debugging Techniques, Summary of JavaScript Data Structure and Algorithmic Techniques.Summary of JavaScript Traversal Algorithms and Techniques and Summary of JavaScript Mathematical Operation Usage

I hope that the description in this paper will be helpful to everyone's JavaScript program design.

Related articles: