javascript - 有两个函数都绑定了鼠标左键事件，冲突怎样解决？

Question

两个函数分别绘制两个不一样的图形，通过绑定鼠标左键来实现。
现在两个函数会同时进行，怎样解决？

Answer 1

<button id="drawCircle">画圆</button>
<button id="drawSphere">画球</button>

// 需要 jQuery
$("#drawCircle").on("click", function() { 画圆的代码 });
$("#drawSphere").on("click", function() { 画球的代码 });

// 不用 jQuery
document.getElementById("drawCircle").addEventListener("click", ...);
document.getElementById("drawSphere").addEventListener("click", ...);

Answer 2

有两个思路哈
思路一、对同一dom绑定事件过程中，细分两个事件函数的触发条件，通过触发条件的区分去绑定不同的事件。
思路二、两个事件函数的在绑定之前，判断改dom元素是否已经绑定事件，解绑事件后，再重新绑定您需要的事件。

写个例子哈，
jquery环境,菜单。ul下面有li,部分li下面嵌套ul>li(二级菜单或者更多)
$('.example').on('click','ul',function(){

if($(this).children().length > 0){ //这就是你不同函数的条件
    //有下级菜单的处理
}else{
    //没有下级菜单的处理
}

});

Answer 3

楼主你是要两个demo元素分别绑定了click事件还是说监听鼠标左键触发两个不同的事件？要是第一种，就像楼上说的，你直接创建两个页面元素，然后给这两个元素分别绑定click事件，执行画圆或者画方就可以了（当然也可以向1楼说的，添加判断，然后再分别执行对应的事件），即：
obj1.onclick=function（）{//画圆方法}；
obj2.onclick=function(){//画方方法}；
。要是第二种：event.button方法可以试试： if(btnNum==0)
{
//画圆和画方的方法调用；
}