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
贤心 16 hours 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>
<body>
<button class="layui-btn" lay-on="e1">事件1</button>
<button class="layui-btn" lay-on="e2">事件2</button>
<button class="layui-btn" lay-on="e3">事件3</button>
<button class="layui-btn" lay-active="e4">hover: active - 事件4</button>
<button class="layui-btn" lay-active1="e4">hover: active1 - 事件4</button>
<fieldset class="layui-elem-field">
<legend>默认 body 委托元素</legend>
<div class="layui-field-box">
<button class="layui-btn" lay-on="e1">事件 e1</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>
<div id="ID-util-on-test">
<button class="layui-btn" lay-on="e1">新的容器 - 事件1</button>
<button class="layui-btn" lay-on="e5">新的容器 - 事件5</button>
</div>
<fieldset class="layui-elem-field">
<legend>自定义委托元素</legend>
<div class="layui-field-box">
<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>
@ -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({

29
src/modules/util.js
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save