github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(util): 修复 `util.on()` 多个并列使用时，同一委托元素的 `trigger` 冲突问题 (#2348)

Browse Source 
* 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>
2.x
贤心 4 days ago committed by GitHub
parent d101789675
commit 636551547b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 63 additions and 32 deletions
Show Stats Download Patch File Download Diff File

66
examples/util.html
Unescape View File

@ -13,18 +13,32 @@ body{padding: 50px;}
</head> </head>
<body> <body>
<button class="layui-btn" lay-on="e1">事件1</button> <fieldset class="layui-elem-field">
<button class="layui-btn" lay-on="e2">事件2</button> <legend>默认 body 委托元素</legend>
<button class="layui-btn" lay-on="e3">事件3</button> <div class="layui-field-box">
<button class="layui-btn" lay-active="e4">hover: active - 事件4</button> <button class="layui-btn" lay-on="e1">事件 e1</button>
<button class="layui-btn" lay-active1="e4">hover: active1 - 事件4</button> <button class="layui-btn" lay-on="e2">事件 e2</button>
<button class="layui-btn" lay-on="e3">事件 e3</button>
<button class="layui-btn" lay-bind="e1">hover: lay-bind - 事件 e1</button>
<button class="layui-btn" lay-active="e1">hover: lay-active - 事件 e1</button>
<button class="layui-btn layui-btn-primary" lay-on="getBodyEvents">查看 body 的事件集合</button>
</div>
</fieldset>
<br><br> <br><br>
<div id="ID-util-on-test"> <fieldset class="layui-elem-field">
<button class="layui-btn" lay-on="e1">新的容器 - 事件1</button> <legend>自定义委托元素</legend>
<button class="layui-btn" lay-on="e5">新的容器 - 事件5</button> <div class="layui-field-box">
</div> <div id="ID-util-on-test">
<button class="layui-btn" lay-on="e1">事件 e1 - 测试阻止冒泡</button>
<button class="layui-btn" lay-on="e5">事件 e5</button>
<button class="layui-btn" lay-on="e6">hover: 事件 e6</button>
<button class="layui-btn layui-btn-primary" lay-on="getElemEvents">查看该委托元素的事件集合</button>
</div>
</div>
</fieldset>
<hr> <hr>
@ -105,7 +119,11 @@ layui.use(['lay', 'util', 'layer'], function(){
alert(othis.html()) alert(othis.html())
}, },
e2: function(othis){ 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', { util.on('lay-bind', {
e4: layui.throttle(function(othis) { e1: layui.throttle(function(othis) {
layer.tips(othis.html(), this, { tips: 3 }); layer.tips(othis.html(), this, { tips: 3 });
}, 3000), // 3s 内不重复执行 }, 3000), // 3s 内不重复执行
e5: function() { e2: function() {
console.log(111); console.log(111);
} }
}, { }, {
trigger: 'mouseenter' trigger: 'mouseenter'
}); });
// Test: 不同属性、相同值 // Test: 不同属性、相同值
util.on('lay-active1', { util.on('lay-active', {
e4: function(othis) { e1: function(othis) {
this.innerHTML = 'hover: '+ (Math.random()*100000 | 0); this.innerHTML = 'hover: lay-active - 事件 e1 - '+ (Math.random()*100000 | 0);
} }
}, { }, {
trigger: 'mouseenter' trigger: 'mouseenter'
@ -146,13 +164,27 @@ layui.use(['lay', 'util', 'layer'], function(){
this.innerHTML = 'click: '+ (Math.random()*100000 | 0); this.innerHTML = 'click: '+ (Math.random()*100000 | 0);
layui.stope(e); // 阻止事件冒泡 layui.stope(e); // 阻止事件冒泡
}, },
e5: function(othis) { e5: function(othis, e) {
this.innerHTML = 'click: '+ (Math.random()*100000 | 0); 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' 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({ var countdown = util.countdown({

29
src/modules/util.js
Unescape View File

@ -417,31 +417,30 @@ layui.define('jquery', function(exports){
// 初始化 data 默认值，以委托元素为存储单元 // 初始化 data 默认值，以委托元素为存储单元
if (!elem.data(DATANAME)) { if (!elem.data(DATANAME)) {
elem.data(DATANAME, { elem.data(DATANAME, {
events: {}, events: {}
callbacks: {}
}); });
} }
// 读取 data 缓存 // 读取 data 缓存
var dataCache = elem.data(DATANAME); var dataCache = elem.data(DATANAME);
var callbacks = dataCache.callbacks;
// 根据 attr 记录事件集合 // 根据 attr 和 trigger 的组合作为 key
events = dataCache.events[attr] = $.extend(true, dataCache.events[attr], events); 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( elem.on(trigger, attrSelector, function(e) {
options.trigger, var othis = $(this);
attrSelector, var attrValue = othis.attr(attr);
callbacks[attr] = function(e) { typeof events[attrValue] === 'function' && events[attrValue].call(this, othis, e);
var othis = $(this); });
var key = othis.attr(attr);
typeof events[key] === 'function' && events[key].call(this, othis, e);
}
);
return events; return events;
} }

Write Preview
Loading…
Cancel
Save