|
一、点击失效
描述：将点击事件（click）委派在document或者body上，且目标元素为默认不可点击的元素时（非<a>、 <button>而是<span>等），点击失效。
实例代码：
<body>
<div class="page-content">
<ol class="scence-hot">
<li data-id="1-1" data-type="1" data-event="J_storeHotBtn"></li>
</ol>
</div>
</body>
// 点击事件按钮
$('body').on('click', '[data-event]', function(e) {
var arr = $(this).data('event').match(/J_(\w+)Btn/);
var selector = arr[1];
switch (selector) {
case 'storeHot':
$targetElem = $targetElem.parent('li').length ? $targetElem.parent('li') : $targetElem;
var type = $targetElem.data('type');
var id = $targetElem.data('id');
switch (type) {
case 1:
self._createDialog('hot-store', '', id);
break;
case 2:
self._createDialog('hot-hb', '', id);
break;
case 3:
self._createDialog('hot-hb-simple', '', id);
break;
}
break;
}
});
解决办法有五种：
1、取消事件委派，将事件直接绑定在目标元素本身上；
2、将目标元素更换成默认可点击的元素，如<a>、<button>；
3、将事件委派在非document或body上；
4、将目标元素增加样式cursor:pointer；
5、将click事件换成touch事件。
方案3为最佳方案，其他三种的代价相对较大。方案1，不便于代码的管理、性能等；方案2，区块的点击无法实现（语义等方面考虑）；方案4，影响展现，会改变原有的交互体验。方案3几乎没有以上几点缺点。
二、点击闪屏
ios下闪屏问题，由事件委派引发，解决方案如下：
1、去除事件委派；
2、给委派的元素加上属性
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
方案2为最佳方案。 | 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-6-8 17:24:20