New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

on="tap"和百度统计事件追踪的click事件冲突 #986

Closed
jennyliang220 opened this Issue Jan 3, 2018 · 7 comments

Comments

Projects
None yet
4 participants
@jennyliang220
Member

jennyliang220 commented Jan 3, 2018

问题分类

MIP 组件使用

问题描述

<div 
    on="tap:lightbox.toggle"
    data-stats-baidu-obj="%7B%22type%22%3A%22click%22%2C%22data%22%3A%22%5B_trackPageview%2C%20%2Fmip-stats%2Fsheji%5D%22%7D">
    点击发送请求,打开弹框
</div>

on属性的tap和百度统计事件追踪的click事件冲突,on:tap时lightbox已经弹出,不会触发click事件。

复现方式(线上bug 填写此项)

页面URL: https://jennyliang220.github.io/miptests/mip-stats-baidu/tap-on.html

在pc上访问,可以正常发送事件。在移动端访问不发送事件统计。

您的建议方案

百度统计click事件改成touchend?mouseup?

@momofan

This comment has been minimized.

Member

momofan commented Jan 3, 2018

问题已定位,百度统计的时间追踪绑定在 click 事件上,而移动端 click 点击有200ms 的延迟,在这段时间内,tap 事件又把 lightbox 的 dom 和背景 mask 的 dom 展现出来。导致 click 点击的位置失效。解决方案产出中

@wupengFEX

This comment has been minimized.

Member

wupengFEX commented Jan 4, 2018

@momofan @jennyliang220 我觉得可以使用的方法有以下几种方法:

  1. 将核心代码中实现的点击逻辑封装成通用方法,提供给统计组件使用;
    参考 fastclick:https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js#L149 劫持click
  2. 延迟弹层出现时间,并加动画作为过度(渐显渐隐);

个人倾向于方法一

@xuexb

This comment has been minimized.

Contributor

xuexb commented Jan 5, 2018

我感觉应该有 tapclick 事件,使用哪个取决于开发者,并且说明好 tap 事件延迟的问题。而这里就需要使用 click 事件。

我遇到的场景是使用 tap 事件调弹出层,弹出层里有链接,导致点击穿透,跳转页面。

@jennyliang220

This comment has been minimized.

Member

jennyliang220 commented Jan 8, 2018

wupengFEX: 延迟弹层出现时间,并加动画作为过度(渐显渐隐)

延迟200ms就可以解决问题,但不建议增加渐显渐隐。比如,200ms延迟+200ms动画,就显得更慢了。

除此之外的解决方案:
3. 在核心代码手势中,当tap触发时,手动trigger click事件。
https://github.com/mipengine/mip/blob/master/src/utils/gesture.js#L15-L22

@jennyliang220

This comment has been minimized.

Member

jennyliang220 commented Jan 8, 2018

@momofan 提出,

  1. 有交互有展现的事件,开发时使用click。
  2. 在百度统计(以及其它统计组件)中,绑定click时,判断此dom是否有on属性。如果有,click变成touchend。
@jennyliang220

This comment has been minimized.

Member

jennyliang220 commented Jan 8, 2018

最终结论

快速解决

在百度统计(以及其它统计组件)中,绑定click时,判断此dom是否有on属性。如果有,click变成touchend。 @我

最终解决

参考 fastclick 方案,截获click事件。所有绑定click事件的元素,采用核心代码tap逻辑。 @xuexb

@jennyliang220

This comment has been minimized.

Member

jennyliang220 commented Jan 19, 2018

#999 修复这个问题,2018.1.18已上线。上线后支持这样触发:

<button id="btn-open" on="tap:my-lightbox.open" data-stats-baidu-obj="%7B%22type%22%3A%22click%22%2C%22data%22%3A%22%5B_trackPageview%2C%20%2Fmip-stats%2Fsheji%5D%22%7D">
    点击打开弹层,触发统计 mip-stats%2Fsheji
</button>

<mip-lightbox
	id="my-lightbox"
	layout="nodisplay"
	autoclosetime="2"
	class="mip-hidden"
	content-scroll>
	<div class="lightbox">
		<h1>Hello, World!</h1>
		<span on="tap:my-lightbox.toggle" class="lightbox-close">关闭弹层</span>
	</div>
</mip-lightbox>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment