0

そのため、ユーザーがマウスで左右にスワイプしたり、モバイルでタッチしたりしたときにログに記録されるコードがあります。

しかし、私がする必要があるのは、この領域内のいくつかの要素でこれを停止することです。たとえば、このコードは、mainContainerでのスワイプをログに記録します

var maxTime = 1000,
// allow movement if < 1000 ms (1 sec)
maxDistance = 50,
// swipe movement of 50 pixels triggers the swipe
target = jQuery('#mainContainer'),
startX = 0,
startTime = 0,
touch = "ontouchend" in document,
startEvent = (touch) ? 'touchstart' : 'mousedown',
moveEvent = (touch) ? 'touchmove' : 'mousemove',
endEvent = (touch) ? 'touchend' : 'mouseup';

target.bind(startEvent, function(e) {
    // prevent image drag (Firefox)
    // e.preventDefault();
    startTime = e.timeStamp;
    startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
    startTime = 0;
    startX = 0;
}).bind(moveEvent, function(e) {
    // e.preventDefault();
    var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
        currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
        // allow if movement < 1 sec
        currentTime = e.timeStamp;
    if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {

        console.log(startEvent);
        if (currentX < startX) {
            // swipe left code here
           console.log("swipe left");
        }
        if (currentX > startX) {
            // swipe right code here
           console.log("swipe right");
        }
        startTime = 0;
        startX = 0;
    }
});

しかし、mainContainer内にはいくつかのスライダーがあり、それらを移動したときにログを取得したくありません（条件をトリガーします）。

私のすべてのスライダーにはクラススライダーがあります。

マウス/タッチが開始する場所がこのクラス内にあるかどうかを示すifステートメントを作成することを考えていましたが、イベントは発生しません。多分これは間違ったアプローチですか？

これが良いアプローチである場合、マウス/タッチがこの領域にあるかどうかをどのように知ることができますか？

ありがとう

4

1 に答える 1

1

event.target にクラスがあるかどうかを確認するだけです.slider:

target.bind(startEvent, function(e) {
     if ( !$(e.target).is('.slider') ) {
         startTime = e.timeStamp;startX = e.originalEvent.touches ?   
                         e.originalEvent.touches[0].pageX : 
                         e.pageX;
     }
}).bind(...
于 2013-02-13T00:08:39.330 に答える