mipengine/mip

event-action 添加 click 事件

xuexb opened this issue · 2 comments

xuexb commented

由于 MIP 中提供的 on="tap:id.action 是 touch 事件触发，在下面一些场景下可能会导致“点击穿透”的问题：

  • 页面中有点击按钮时触发某个弹出层展示，弹出层中有链接，由于按钮是用 on="tap" 绑定，在点击时会误点击到弹出层中的链接
  • 页面的弹出层按钮点击时关闭弹出层，由于关闭按钮是用 on=tap 绑定，在点击时可能会误点击到原页面中的链接

以上问题在 iOS 的 UC浏览器、手机百度、百度浏览器等复现机率较高，为了解决该问题，添加全局的 on="click:id.action 点击事件，由原生的 click 触发。

关联：#228

注意事项

  • 开发者在使用点击事件时应当根据需求判断使用 click 还是 tap ，应当明白使用 tap 对点击交互操作带来的穿透问题
  • click 事件要慢于 tap 事件，在 iOS 设备中更明显
  • iOS 设备中，向非链接（<a href="*">）、按钮（<button>、<input>）元素绑定 click 事件时需要向元素添加样式：cursor: pointer

示例

https://admin.static.xuexb.com/html/xuexb/test-event-action-click.html?r=123

xuexb commented

需要关注下受不受影响。

本地已 mock 出该组件使用的场景，会导致该组件内的 on="click" 触发再次，但回归也没有问题，因为触发的回调里只是移动样式名来做动画，代码如：

// 移除遮罩层
function removePopupWindowCover(element) {
    var elementParentNode = element.parentNode;
    setTimeout(function () {
        if (elementParentNode.tagName === 'MIP-FIXED') {
            util.css(elementParentNode, {
                height: 'auto'
            });
        }
        util.css(element, {
            height: 'auto'
        });
    }, 300);
}

// 关闭
function closePopupWindow(element) {
    var popupWindowElement = element.querySelector('aside');
    popupWindowElement.classList.remove('visible');
    removePopupWindowCover(element);
}

核心代码添加 click 事件上线后，站长只需要把触发 click 事件的代码删除即可：

// 事件绑定
function bindClickEvent(element, settings) {
    var needEventElement = element.querySelectorAll('[on^="click"]');
    [].forEach.call(needEventElement, function (item) {
        item.addEventListener('click', function (event) {
            if (settings.type && settings.type === 'select') {
                var selectedElement = element.querySelector('.label-radio--checked');
                selectedElement.classList.remove('label-radio--checked');
                item.querySelector('.label-radio').classList.add('label-radio--checked');
            }
-            viewer.eventAction.execute('click', event.target, event);
        });
    });
}