這是移動端判斷事件touch，pc端一樣的。

首先先畫出來一個圓環；

下面是html代碼

<div class="circleHandle">
    <div class="cirAround">
        <div class="cirAro"></div>
        <div class="point pointtop"></div>
        <div class="point pointright"></div>
        <div class="point pointbtm"></div>
        <div class="point pointleft"></div>
        <div class="cirAffrim">ok</div>
    </div>
</div>

　　然後是css

.circleHandle{
	display: flex;
    align-items: center;
    justify-content: center;
}
.cirAround{
	width: 160px;   
	height: 160px;   
	border:40px solid transparent;
	border-radius: 50%; 
	position: relative;
	z-index: 100;
}
.point{
	width: 8px;
	height: 8px;
	background: #575757;    
	border-radius: 50%;
	position:absolute;
}
.pointtop{
    top: -24px;
    left: 36px;
}
.pointright{
	top: 36px;
    right: -24px;
}
.pointbtm{
	bottom: -24px;
    left: 36px
}
.pointleft{
	top: 36px;
    left: -24px;
}
.cirAro{
	position: absolute;
	top: -40px;
	left: -40px;
	width: 160px;   
	height: 160px;
	border: 1px solid #9DA0A5;
	border-radius: 50%;
	z-index: 1;
}
.cirAffrim{
	position: absolute;
	border:1px solid #9DA0A5;
	width:100%;
	height: 100%;
	background-color: #F1F5F6;
	border-radius: 50%;
	line-height:78px;
	text-align: center;
	font-size:16px;
	font-family: "黑體";
	z-index: 200;
}

　　接下來是js

//獲取點擊點位所在父元素坐標
var getElPosition = function(el){
    var t = el.offsetTop,
        l = el.offsetLeft;
    while( el = el.offsetParent){
        t += el.offsetTop;
        l += el.offsetLeft;
    }
    return {
        x : parseInt(l),
        y : parseInt(t)
    };
};
$(".cirAround").on("touchstart",function(e){
	e.stopPropagation();
	var w=parseInt($(".cirAround").css("border-width"));
	var a={x:0,y:0},b={x:0,y:0},c={x:0,y:0}//a為圓心，b為上面點，c為點擊點,d為左邊點
	a.x=getElPosition(this).x+w*2;
	a.y=getElPosition(this).y+w*2;
	b.x=getElPosition(this).x+w*2;
	b.y=getElPosition(this).y+w/2;
	c.x=parseInt(e.changedTouches[0].clientX);
	c.y=parseInt(e.changedTouches[0].clientY);
	var angel=getAngel(a,b,c);
//當angel大於0.5時為上面，小於-0.5時在下面
	if(angel>0.5){
		$(".cirAround").css("border-color","transparent");		
		$(".cirAround").css("border-top-color","#C8CACD");
	}else if(angel<-0.5){
		$(".cirAround").css("border-color","transparent");	
		$(".cirAround").css("border-bottom-color","#C8CACD");		
	}else{
        //x坐標小於圓心坐標為左邊的，大於的話為右邊
		if(c.x<a.x){
			$(".cirAround").css("border-color","transparent");	
			$(".cirAround").css("border-left-color","#C8CACD");
		}else{
			$(".cirAround").css("border-color","transparent");	
			$(".cirAround").css("border-right-color","#C8CACD");	
		}
	}
})
$(".cirAround").on("touchend",function(e){
	$(".cirAround").css("border-color","transparent");	
})
//計算cos值,數學中兩個向量計算夾角的方法
function getAngel(a,b,c){
	var ac={x:0,y:0,abs:0},ab={x:0,y:0,abs:0};
	ac.x=c.x-a.x;
	ac.y=c.y-a.y;
	ab.x=b.x-a.x;
	ab.y=b.y-a.y;
	ac.abs=Math.sqrt(ac.x*ac.x+ac.y*ac.y);
	ab.abs=Math.sqrt(ab.x*ab.x+ab.y*ab.y);
	var angel=(ac.x*ab.x+ac.y*ab.y)/(ac.abs*ab.abs)
	return angel;
}
    

　這樣就實現了點擊時判斷在哪個圓環中，如下圖

自己學的數學已經全部還給美術老師了···(╯▽╰)

判斷點擊點是否在圓環（圓）內