Example of circular clickable area implemented by JS+HTML [3 methods]

This article describes the circular clickable area implemented by JS+HTML. Share it for your reference, as follows:

Method 1:

<img>passusemapMap to<map>circle shape<area>。

<img src="images/" usemap="#Map" /> 
<map name="Map" >
 <area shape="circle" coords="100,100,50" href="" rel="external nofollow" target="_blank"/>
</map>

Method 2:

Set divborder-radius:50%。

<div ></div>
#circle{
 background:red;
 width:100px;
 height:100px;
 border-radius:50%;
}

Method 3:

JS implementation, obtain the coordinates of the mouse click position, determine whether the distance to the dot is not greater than the radius of the circle, and determine whether the click position is within the circle.

 = function(e) { 
 var r = 50; 
 var x1 = 100;
 var y1 = 100;
 var x2= ;
 var y2= ; 
 var distance = (((x2 - x1, 2) + (y2 - y1, 2))); 
 if (distance <= 50)
 alert("Yes!"); 
}

Interested friends can use itOnline HTML/CSS/JavaScript front-end code debugging and running tools：http://tools./code/WebCodeRunTest the running effect.

For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript page element operation skills》、《A complete collection of JavaScript event-related operations and techniques》、《Summary of JavaScript DOM skills》、《Summary of JavaScript data structure and algorithm techniques》、《Summary of JavaScript traversal algorithm and skills"and"Summary of JavaScript Errors and Debugging Skills》

I hope this article will be helpful to everyone's JavaScript programming.