失去焦点与点击事件冲突

来源:互联网 发布:淘宝上的小样是真的吗 编辑:程序博客网 时间:2024/05/21 16:57

在自定义select样式情况下,由于焦点事件会在点击事件之前先执行,如果在失去焦点事件设置时间延时,在体验上还是有点差距,所以我提供了另一个思路。

思路:判断鼠标点击坐标是否在自定义select范围内,不在范围内则执行失去焦点逻辑。(使用jquery)

// 模拟select失去焦点事件$("body").on("click", function(event){    var x = event.clientX;    var y = event.clientY;    var x1,x2,y1,y2;    $(".control-select-wrap").each(function(i){        x1 = $(this)[0].offsetLeft;        y1 = $(this)[0].offsetTop;        x2 = $(this)[0].offsetLeft + $(this)[0].offsetWidth;        y2 = $(this)[0].offsetTop + $(this)[0].offsetHeight;
// 如果不在范围
if( x < x1 || x > x2 || y < y1 || y > y2){ } });});
// 自定义select的item按钮点击事件$(".drop-item").on("click", function(){    });
这里设置了body点击事件,顺序是在其他点击事件后面。


0 0
原创粉丝点击