解决子元素click对父元素mousedown的影响

如题，在最子元素绑定click事件，父元素绑定mousedown事件。
由于事件冒泡的影响，当子元素触发click的时候，其父元素的mousedown也会被触发。

var big_ele = document.querySelector(".big-box");
var small_ele = document.querySelector(".small-box");
big_ele.onmousedown = function(){
    alert("这是大盒子");
}
small_ele.onclick = function(){
    alert("这是小盒子");
}

如上图点击绿色小盒子时，会触发大盒子的mousedown事件。

解决方法

很简单，但是会有点麻烦，就是保持父元素事件不变，将子元素的click事件换成mousedown和mouseup事件。

• mousedown中的回调函数里阻止事件冒泡
• mouseup中的回调函数里放原本click要执行的代码。

small_ele.onmousedown = function(ev){
	var e = ev || event;
	if(typeof e.stopPropagation === "function" ){
		e.stopPropagation();
	}else{
		e.cancelBubble = true;
	}
}
small_ele.onmouseup = function(){
	alert("这是小盒子");
}

这样子元素的点击事件就能如愿响应了。

如果大家有更好跟方便的解决办法，欢迎留言讨论！