レイダーズは、あなたが知っているのピットモバイルクリックイベントを、終了しますか？

あなたが望むかもしれないタイトルを見て、言ってあまり持っているだけでなく、レイダーズを書くためにイベントをクリックしてください？ハハ、あなたがそう思うならば、唯一のショーシンプルにあなたは若すぎること。

最初の質問は、イベントをクリックして直面する学生が開発した携帯端末に接触：300msのは、応答遅れのイベントをクリックします。したがって、この問題を解決するために、多くの問題を引き起こした経験にすぐに応答できない避けられなくなってきました。

この問題を解決するには、次のとおりです。zepto.jsタップイベント。タップイベントは、モバイル端末でのクリックイベントとして理解され、ほぼ完全コピーはjQueryのAPIをzepto.jsによるものであり、そして多くの場合、H5のjQueryの開発を置き換えるために使用されることができます。

モジュラー、注意を払うには、zepto.jsはいくつかの方法をサポートしていないということなので、ダウンロード時間を、ダウンロードzepto.jsに一部の学生ではないすべてのモジュールをリードする悲劇の多くの原因はほとんどが原因。

タップイベントが300msの遅延の問題を解決するため、しかし、物事には、ここで終わりではありませんでした、それは主要な新しいバグをもたらした、浸透をクリックしてください。

浸透手段をクリックすると、固定位置またはこの要素のトップレベルのページの要素の絶対位置は、クリックイベントをバインドする場合は、あなたがクリックイベントやタグを実行するためにトリガされますがある場合、以下の対応する点をクリックしてくださいということです。ここでマップ、自分の脳にポップアップの多様ではない、これは非常にまだあります。

この問題を解決するために、一部の人々はtouchendを取得しようとしました。touchendがトリガされるときに一度画面をオフに指。ノー300msの遅延、ノークリックの浸透は、単に完璧なソリューションを探します。しかし！

まず、簡単にはここで少し知識のポイントをまとめます。

最後の移動はtouchstart、touchmove、touchend、TAPを持っており、
PC側ではマウスダウン、のMouseMove、のmouseup、クリックされています。

それぞれの関係と効果はほとんど関連性、プレス、スライドリリース。PCドラッグを達成することができる3つのイベントの前端部をスライドさせ、3つのイベントのフロントエンドを使用して達成することができます。

だから、最後のPCのmouseupマウスを離すとき、彼は私がターゲット要素にスライドさせた場合、放し非常に遠い地域で、その結果、トリガされますので、クリックして交換することがないでは、このような状況はのmouseupとtouchendがトリガされますイベント。したがって、この場合には、クリックイベントの定義を満たしていません。あなたは、いくつかのケースでは、特定のイベントのニーズにドラッグし、クリック拘束されることにあれば、より解決することはできません。

PCがサポートされていないため、クリックを置き換えるために使用されていないtouchendにつながる非常に重要な理由もあります。ボスは、多くの場合、自分のページだけでなく、携帯端末に表示したいので、他の方法を考えなければなりませんでした。

私は長い間考えてきた、この記事を読んで、経験豊富な学生がいることを知っているfastclick.jsの。はい、今、これは非常に良いソリューションです。問題300msの遅延を解決するために、タップイベントの代替与えzepto.js、およびfastclick.jsはキャンセルのクリックイベントを遅延させる方法を見つけることです。したがって、いずれのコースは何の問題のクリックの浸透はないであろう、クリックイベントです。

まず、fastclick.jsを導入する方法を考えます

<script type='application/javascript' src='/path/to/fastclick.js'></script>

あなたは次のステートメントを開発するネイティブのJSを使用している場合に行われます。

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

あなたはjqueryのを使用したい場合

$(function() {
    FastClick.attach(document.body);
});

あなたは、このようなrequirejsとしてCommonJSスタイルのフレームを使用している場合

var attachFastClick = require('fastclick');
attachFastClick(document.body);

AMD

var FastClick = require('fastclick');
FastClick.attach(document.body, options);

文を対応したら、安全に携帯端末のページでクリックイベントを使用することができます。ここでは、jqueryの選択とzepto.jsについての質問があるでしょう。順番にいえば素晴らしい記事を書き、クリック遅延が解消されたので、音量が小さい点があるが、それは単に、あなたはまだ少しはあまりにもクールzeptoでしょう実際の開発である可能性があり、私はまだ使用することを好みますjqueryの。

- もちろん、我々はピット上のステップに持って終わりません - ！

最近、小さなページを開発し、経済カレンダーカレンダーセクションでは、私が代表要素イベント1日の情報ニーズへのアクセスを達成するために、毎日を与える必要がなく、前の月と次の月を選択してカレンダー全体のセクションを周りにスライド可能に達成するために機能。だから私は、カレンダーセクションにクリックイベントをバインドし、touchstart、touchmove、touchendイベントをスライド達成する必要があります。

今回の問題が発生しました。私は、クリックイベントをバインドする場合は、同じ要素について、Android携帯電話上で、その後、バインドtouchstartイベント、イベントはほとんど故障の状態になりますクリックしてください。でもfastclickでのイベントは、この問題を回避することはできません

エラーのような何かを証明します

$area.on('click', '.weeknumber', function() {
    // 点击每一天获取当天资讯
})

// 实现左右滑动
$area.on('touchstart', function() {})
.on('touchmove', function() {})
.on('touchend', function() {})

学生の強い手はfastfclick確かなソリューションではありません、この場合には、このピットを試しに行くことができます。方法は？

クリックイベントの内容の内部で実行しているときに私の最初の試みは、0のとき、摺動距離でした。私たちは、摺動距離が計算されますときのスライドの実現に[私の番号を懸念する国民が学生を達成する方法がわからない、時間は私がisreact検索を見つけるために来ている]ことを知っています。

// 实现滑动的大概代码

// 滑动元素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);
        })
    }
}

上記の私のスライド機能が実装されている、あなたが直接、前回の実行をコピーすることはできませんので、真ん中をカスタマイズするためにいくつかの方法があるでしょう。しかし、原理はかなり明確に置かれている、あなたは自分自身にいくつかの簡単な実装を試すことができます。私は世間の注目、より詳細な説明ああの数を持っています！

これが私の最初の試みで、差は距離に達するが、これはクリックであることを、ゼロスライドにある、クリックイベントは、したがって、何らかのアクションを実行する必要があります。私はもともとテストにも合格したときに、これは、解決できると考えました。しかし - - ！カレンダー上のダウン50回の以上のクリック数が非常に強迫観念製品の同級生は、ポイントの損失の影響で、複数のクリック後に発見されました！！！

彼らはバグを見つけたとき、私の心は崩壊です。さて、私はそれを言うのではなく、すべてのまだ少し未熟後にイベントのアイデアをクリックtouchend使用しようとすることができます。弾丸をかむと、上記の問題を解決する方法を見つけるために続けています。第二には、解決策を考え、そして最終的には自分のパッケージタップイベントを決定します。次のようにコードタップイベントパッケージです。

http：//yangbo5207.github.io/s ...

そのjQueryのタップイベントを使用することができますので、これは、jQueryのイベントを拡張したものです。jQueryのは、すぐに使用することができます背面に導入しました。さらにまたlongTap、スワイプ二つの事象を拡張します。

使用法や他の同じ。

$area.on('tap', function() {});

$area.tap(function() {})

やむを得ないクリックして貫通バグがありますが、もちろん、私は、このパッケージをタップする究極のソリューションので：でクリックイベントとタップイベントと同時結合要素のクリックイベントとスライドイベントの必要性、その他の場合ことができます。私は完全にこの問題を解決するためにtap.jsとfastclick.jsを結合する必要があります。ハートレイアは、最終的に取得します。

OK、クリックイベントの端に移動すると、あなたが携帯電話側を開発する作業に関与している可能性がある場合、非常に多くのピットですが、単純なクリックイベントでは可能だと思いませんでした、オーバー要約、私はこの記事があなたの賞賛とポイントの価値があると信じていますコレクションは、すべての後に、そんなにピットを教訓にステップです。

おすすめ