mirror of https://github.com/layui/layui
fix(util): 修复 `util.on()` 多个并列使用时，同一委托元素的 `trigger` 冲突问题 (#2348)
* 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>pull/2356/head
贤心
GitHub
parent
d101789675
commit
636551547b
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue