>  기사  >  웹 프론트엔드  >  安卓平台的浏览器 touchend 事件触发失效?

安卓平台的浏览器 touchend 事件触发失效?

WBOY
WBOY원래의
2016-06-07 08:45:113271검색

点击应该触发 touchstart 和 touchend 两个事件,但是安卓手机中并没有触发 touchend,请问如何解决这个问题?

回复内容:

touch事件在手机浏览器上存在莫名的兼容性问题, 会导致touchend事件不触发!

code.google.com/p/andro
Working with touch events
On Android ICS if no preventDefault is called on touchstart or the first touchmove, further touchmove events and the touchend will not be fired.
As a workaround we need to decide in the first touchmove if this is a scroll (so we don’t call preventDefault) and then manually trigger touchend.

如果你没有太多顾虑(关于scroll的), 请在touchstart的handle中使用event.preventDefault(), 即可让touchend事件正常触发 感谢啊,莫名其妙的问题 最近几天开发也碰到了这个问题,项目要模拟一个app的向下拉动加载效果。我的解决办法是在touchmove中添加e.preventDefault(),将浏览器默认的滑动惯性去掉,这样就不会干扰到touchend事件的触发,然后再手写滑动效果,另外需要注意判定是否有滑动产生,避免干扰默认的点击效果触发:
var x, y, z;
<code class="language-text">var slideCouter = 1;
var hasMoved = false;
var checking = false;
var hasMore = true;
$(document).on('touchstart', function (e) {
    z = $(document).scrollTop();
    x = event.targetTouches[0].pageY;
}).on('touchmove', function (e) {
    e.preventDefault();
    hasMoved = true;
    y = event.targetTouches[0].pageY;
    z += x - y;
    $(document).scrollTop(z);
}).on('touchend', function (e) {
    if (x - y > 200 && !checking && hasMoved && hasMore) {
        checking = true;
        slideCouter++;
        $('.login').removeClass('none');
        $.ajax({
            url: "<?php echo $this->createUrl('/teacher/categoryMore');?>",
            type: "get",
            data: {
                "keyword": '<?php echo $keyword;?>',
                "page": slideCouter
            },
            cache: false,
            success: function (data) {
                completecall(data);
            }
        });
    }
    hasMoved = false;
});
==============
目前别的方法都会有或多或少的弊端,该方法的弊端就是滑动惯性被取消,自己写的效果会不那么流畅,但还算比较好的解决这个兼容问题。
</code>
可以考虑同时监听touchcancel事件。 @jack king 使用touchcancel这个在android4.4中会出现复制文本之类的
复制文本是什么状况 我也想知道 我也遇到了这个问题啊,需要顾虑scroll,阻止默认事件这个行不通,使用touchcancel这个在android4.4中会出现复制文本之类的,这个要怎么解决? @bo bo 我要顾虑scroll,怎么解决这个问题啊?
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.