MIP 页面事件 event-action 讨论

[xuexb]

遵循 MIP 规范，页面元素使用 event-action 形式，如： <div on="tap:test.custom_event">不带参数</div> （文档），但由于是 tap 事件，如果应用于一些事件里会覆盖触发元素的场景（如：弹出层），就会发生点击穿透，场景如：

在页面中 <button on="tap:right-sidebar.open"> 点击按钮时让一个 sidebar 显示，而这个 sidebar 是个弹层，弹层中又有一些跳转链接，导致点击时先触发弹层显示，又直接跳转了页面。

本身想使用 on="click:right-sidebar.open" 解决，但没有该接口。而 tap 事件在 pc 中又是由 click 替换，从而在 pc 中又复现不了。

via:

mip/src/viewer.js

Lines 122 to 136 in 8426f65

	setupEventAction: function () {
	var hasTouch = fn.hasTouch();
	var eventAction = this.eventAction = new EventAction();
	if (hasTouch) {
	// In mobile phone, bind Gesture-tap which listen to touchstart/touchend event
	/* istanbul ignore next */
	this._gesture.on('tap', function (event) {
	eventAction.execute('tap', event.target, event);
	});
	} else {
	// In personal computer, bind click event, then trigger event. eg. `on=tap:sidebar.open`, when click, trigger open() function of #sidebar
	document.addEventListener('click', function (event) {
	eventAction.execute('tap', event.target, event);
	}, false);
	}

[xuexb]

从而在 pc 中又复现不了

额，发现在 pc 使用模拟器还是可以复现的。因为模拟器里有 touch 相关事件。

[jennyliang220]

复议，我也遇到类似问题。

使用场景：

将弹层（mip-lightbox）组件与mip-form表单共同使用，接收用户输入。当mip-form提交时获取输入内容，触发弹层显示，将内容显示在弹层中。

遇到的问题

我写了个性化组件来读取用户输入，当用户点击回车，在弹层中显示输入内容。但在个性化组件中不能触发触发弹层内部暴露出来的open事件。

建议

将customElement和对应DOM绑定，通过DOM能获取customElement 属性及公共方法。提供触发组件公共方法的函数，如MIP.trigger(querySelector('#lightbox'), 'open')。

[xuexb]

并且梳理下现在使用的事件，比如：

• tap
• click
• change

[xuexb]

还有，事件这块能不能实现一些通用的方法，如：跳转链接 on="eventName.jumpurl:https://xuexb.com/?word=event.target.value" ，这将提升一些事件的易用性。

[xuexb]

尴尬，天天被这问题坑。

[momofan]

像这种，可以使用组件内部逻辑进行点击影藏，而不是使用 tap

[xuexb]

在外部 tapbar 上加一个元素点击时显示 sidebar ，而 sidebar 里会有链接。

[xuexb]

关联 mipengine/mip-extensions#986 ，也需要考虑

[xuexb]

AMP 这块做的相当完善：https://www.ampproject.org/docs/interaction_dynamic/amp-actions-and-events

[xuexb]

#288

[xuexb]

贴一个站长日常提交的组件日常。

/**
 * @file 
 * @author
 * @version 1.0.0
 */
define(function (require) {
    var customElement = require('customElement').create();
    var util = require('util');

    /**
     * build
     *
     */
    function build() {

        var that = this;

        that.addEventAction('close', function (event) {
            event.preventDefault();
            util.css(that.element, 'display', 'none');
        });
    }

    customElement.prototype.build = build;

    return customElement;
});

[xuexb]

添加了 on="click:id.action" 事件，#307