From 636551547b5d5d0f3831465713747efc7de4f2fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Mon, 25 Nov 2024 11:17:53 +0800 Subject: [PATCH] =?UTF-8?q?fix(util):=20=E4=BF=AE=E5=A4=8D=20`util.on()`?= =?UTF-8?q?=20=E5=A4=9A=E4=B8=AA=E5=B9=B6=E5=88=97=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=90=8C=E4=B8=80=E5=A7=94=E6=89=98=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E7=9A=84=20`trigger`=20=E5=86=B2=E7=AA=81=E9=97=AE?= =?UTF-8?q?=E9=A2=98=20(#2348)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(util): 修复 `util.on()` 多个方法并列使用时，同一委托元素的 `trigger` 冲突问题 * chore(util): 简化代码 * Update src/modules/util.js Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com> --------- Co-authored-by: morning-star <26325820+Sight-wcg@users.noreply.github.com> --- examples/util.html | 66 +++++++++++++++++++++++++++++++++------------ src/modules/util.js | 29 ++++++++++---------- 2 files changed, 63 insertions(+), 32 deletions(-) diff --git a/examples/util.html b/examples/util.html index 739369bc..09ef0182 100644 --- a/examples/util.html +++ b/examples/util.html @@ -13,18 +13,32 @@ body{padding: 50px;} - - - - - +
+ 默认 body 委托元素 +
+ + + + + + +
+


-
- - -
+
+ 自定义委托元素 +
+
+ + + + +
+
+
+
@@ -105,7 +119,11 @@ layui.use(['lay', 'util', 'layer'], function(){ alert(othis.html()) }, e2: function(othis){ - alert(othis.html()) + alert('body:'+ othis.html()) + }, + getBodyEvents: function(othis, e) { + var dataCache = $(e.delegateTarget).data('UTIL_ON_DATA'); + console.log(dataCache.events); } }); @@ -120,20 +138,20 @@ layui.use(['lay', 'util', 'layer'], function(){ }); // 自定义触发事件的元素属性名、自定义触发事件的方式 - util.on('lay-active', { - e4: layui.throttle(function(othis) { + util.on('lay-bind', { + e1: layui.throttle(function(othis) { layer.tips(othis.html(), this, { tips: 3 }); }, 3000), // 3s 内不重复执行 - e5: function() { + e2: function() { console.log(111); } }, { trigger: 'mouseenter' }); // Test: 不同属性、相同值 - util.on('lay-active1', { - e4: function(othis) { - this.innerHTML = 'hover: '+ (Math.random()*100000 | 0); + util.on('lay-active', { + e1: function(othis) { + this.innerHTML = 'hover: lay-active - 事件 e1 - '+ (Math.random()*100000 | 0); } }, { trigger: 'mouseenter' @@ -146,13 +164,27 @@ layui.use(['lay', 'util', 'layer'], function(){ this.innerHTML = 'click: '+ (Math.random()*100000 | 0); layui.stope(e); // 阻止事件冒泡 }, - e5: function(othis) { + e5: function(othis, e) { this.innerHTML = 'click: '+ (Math.random()*100000 | 0); + }, + getElemEvents: function(othis, e) { + var dataCache = $(e.delegateTarget).data('UTIL_ON_DATA'); + console.log(dataCache.events); } }, { elem: '#ID-util-on-test' }); + // 自定义触发事件的委托元素 + 自定义触发事件 + util.on({ + e6: function(othis, e) { + this.innerHTML = 'hover: 事件 e6 - '+ (Math.random()*100000 | 0); + } + }, { + elem: '#ID-util-on-test', + trigger: 'mouseenter' + }); + // 倒计时 var countdown = util.countdown({ diff --git a/src/modules/util.js b/src/modules/util.js index cc628ee2..7fb37649 100644 --- a/src/modules/util.js +++ b/src/modules/util.js @@ -417,31 +417,30 @@ layui.define('jquery', function(exports){ // 初始化 data 默认值，以委托元素为存储单元 if (!elem.data(DATANAME)) { elem.data(DATANAME, { - events: {}, - callbacks: {} + events: {} }); } // 读取 data 缓存 var dataCache = elem.data(DATANAME); - var callbacks = dataCache.callbacks; - // 根据 attr 记录事件集合 - events = dataCache.events[attr] = $.extend(true, dataCache.events[attr], events); + // 根据 attr 和 trigger 的组合作为 key + var key = attr + '_' + options.trigger; + + // 根据 key 记录事件集合 + events = dataCache.events[key] = $.extend(true, dataCache.events[key], events); + // 清除事件委托，避免重复绑定 - elem.off(options.trigger, attrSelector, callbacks[attr]); + var trigger = options.trigger + '.lay_util_on'; + elem.off(trigger, attrSelector); // 绑定事件委托 - elem.on( - options.trigger, - attrSelector, - callbacks[attr] = function(e) { - var othis = $(this); - var key = othis.attr(attr); - typeof events[key] === 'function' && events[key].call(this, othis, e); - } - ); + elem.on(trigger, attrSelector, function(e) { + var othis = $(this); + var attrValue = othis.attr(attr); + typeof events[attrValue] === 'function' && events[attrValue].call(this, othis, e); + }); return events; }