Look at the title when you might want, click on the event have much to say, but also to write a Raiders? Haha, if you think so, only shows that you too young to simple.
The first question come into contact with the mobile terminal developed by the students will face may click event: 300ms click event of a delayed response. Can not respond immediately to the experience caused a lot of trouble, so to solve this problem has become inevitable.
The solution to this problem is: zepto.jsthe tap event. tap event can be understood as the click event in the mobile terminal, and is almost entirely due to copy zepto.js the jQuery api, and is often used to replace the development of the h5 jquery.
Due to the modular, leading some students to download zepto.js not all modules, causing a lot of tragedy, that zepto.js does not support some ways, so download time to pay attention a little.
But things did not end here, because the tap event to solve a 300ms latency issues, it has brought a major new bug, click penetration .
Click penetration means is that if a fixed positioning or absolute positioning of elements in the page of the top level of this element to bind a click event, then you click on the corresponding point below where there are a click event or a tag will be triggered to perform. Here is not a map, a variety of pop up on their own brain, this is still very much.
To solve this problem, some people tried to get touchend. touchend will be triggered once when the finger off the screen. No 300ms delay, no click penetration, looks simply perfect solution. but!
First briefly summarize here a little knowledge points.
Moving end has touchstart, touchmove, touchend, TAP and the
PC end has mousedown, mousemove, mouseup, click.
Their relationships and effect almost association, respectively, press, slide release. pc drag may be achieved using the front end of three events, by sliding the front end of three events may be achieved.
So, in the end pc mouseup not be replaced click, because he will be triggered when you release the mouse, resulting in an area very far if I slide to the target element, then release, this situation will trigger mouseup and touchend event. So in this case does not meet the definition of a click event. And if you, in some cases, to a certain event needs to be bound dragging and clicking, the more can not be solved.
There is also a very important reason leading to touchend not be used to replace clicks, because the PC does not support. Bosses often want their pages to show not only to the mobile terminal, and therefore had to think of other ways.
I know there are experienced students reading this article, I have long been thinking fastclick.jsof. Yes, now, this is a very good solution. In order to solve the problem 300ms delay, zepto.js given tap event alternative, and fastclick.js is to find ways to delay the click event of cancellation. Therefore, any course is a click event, there would be no problem clicking penetration.
First, think of ways to introduce fastclick.js
<script type='application/javascript' src='/path/to/fastclick.js'></script>If you use the native js to develop the following statement is performed.
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}If you want to use jquery
$(function() {
FastClick.attach(document.body);
});If you are using CommonJS style frame, such as requirejs
var attachFastClick = require('fastclick');
attachFastClick(document.body);AMD
var FastClick = require('fastclick');
FastClick.attach(document.body, options);After corresponding statement, you can safely use the click event in the mobile terminal page. Here, there will be a question about zepto.js with jquery choice. Speaking in turn could write a great article, and it simply is, the actual development you will find zepto still a little too cool, although the volume is small point, since the click delay has been resolved, I still prefer to use jquery.
Of course, we have to step on the pit does not end - -!
Recently developed a small page, the economic calendar in the Calendar section, I need to give the representative element event every day to achieve access to day information needs, but also to achieve to be able to slide around the entire calendar section to select the previous month and next month function. So I need to bind the click event to the calendar section and achieve sliding touchstart, touchmove, touchend event.
This time the problem occurred. On Android phones, for the same element, if I bind the click event, and then bind touchstart event, click the event will be in a state of almost failure. Even with the fastclick events can not avoid this problem
Error demonstrate something like
$area.on('click', '.weeknumber', function() {
// 点击每一天获取当天资讯
})
// 实现左右滑动
$area.on('touchstart', function() {})
.on('touchmove', function() {})
.on('touchend', function() {})Strong hands of students can go to try this pit, in this case, fastfclick is certainly not a solution. How to do?
My first attempt was when the sliding distance of 0 when running inside the click event content. We know that [the public concerned about my numbers do not know how to achieve the students, the time has come to find me searching isreact] in the realization of the slide when a sliding distance will be calculated.
// 实现滑动的大概代码
// 滑动元素translateX的初始值
var iscroll = device_width,
// 用来计算的中间值
istarX = 0,
// 手指第一次点在屏幕上的x坐标
istart_pageX = 0;
// 绑定事件
$area.on('touchstart', touchstart)
.on('touchmove', touchmove)
.on('touchend', touchend);
function touchstart(event) {
event.preventDefault();
istartX = iscroll;
istart_pageX = event.originalEvent.changedTouches[0].pageX;
}
function touchmove(event) {
// 滑动过程中手指位置x坐标会不停变动，这里会保存一个当前位置与初始位置的一个差值
var distance = event.originalEvent.changedTouches[0].pageX - istart_pageX;
iscroll = istartX + distance;
// 这里是我自定义的一个css方法，用来设置元素translateX的当前值
Utils.css(area, { translateX: iscroll });
}
function touchend(event) {
var distance = event.originalEvent.changedTouches[0].pageX - istart_pageX;
$area.off('touchstart touchmove touchend');
// 根据差值的不同，执行不同的动作
if (distance < -80) {
slideNext(function() {
addEventSlider($area);
})
}
else if (distance > 80) {
slidePrev(function() {
addEventSlider($area);
})
}
else if (distance == 0) {
/* 当差值为0时，我认为这是执行了一次点击 */
addEventSlider($area);
}
else {
ani(area).animate(400, 'easeout', { x: -device_width }, function() {
iscroll = -device_width;
addEventSlider($area);
})
}
}The above is my slide functions are implemented, there will be some method to customize the middle, so you can not directly copy the last run. But the principle has been put fairly clear, you can try yourself some simple implementation. I have a number of public attention more detailed explanation Oh!
This is my first attempt, the difference is in sliding distance reaches zero, that this is a click, the click event should therefore perform some action. I originally thought that this can be resolved, when the test also passed. But - -! Product classmate very obsession of more than 50 clicks down on the calendar, was found after multiple clicks, at point loss effects! ! !
When they find the bug, my heart is collapse. Okay, I can only say that, instead of trying to use touchend click event idea after all still a little immature. Bite the bullet and continue to find ways to solve the above problems. Second thought solutions, and ultimately decide their own packages a tap event. Code tap event package is as follows.
http://yangbo5207.github.io/s...
This is an extension of jquery event, so that jquery can use tap event. Jquery introduced on the back will be able to immediately use. In addition also extends longTap, swipe two events.
Usage and other the same.
$area.on('tap', function() {});
$area.tap(function() {})Of course, I tap this package, though there is any unavoidable Click penetrate bug, so the ultimate solution: the need for simultaneous binding element click event and sliding events, with a tap event, other cases with the click event that is can. I need to combine the tap.js and fastclick.js to solve this problem perfectly. Heart Leia, finally get.
OK, moving on click event ends summarize over, you did not think possible with a simple click event there are so many pit, if you may be involved in the work to develop the mobile side, I believe that this article is worthy of your praise and points collection, after all, is a step on the lessons learned so much pit.
