web-dev-qa-db-ja.com

JavaScriptでトリプルクリックをリッスンするにはどうすればよいですか？

これがダブルクリックの場合：

window.addEventListener("dblclick", function(event) { }, false);

トリプルクリックをキャプチャするにはどうすればよいですか？これは、Google Chromeの固定されたタブ用です。

javascriptgoogle-chromedom-events
49
Sam-Bo

3回のクリックを連続してキャプチャするネイティブイベントが存在しないため、独自のトリプルクリック実装を作成する必要があります。幸いなことに、最新のブラウザにはevent.detailがあり、これは MDNのドキュメントに次のように記述されています ：

短時間に発生した連続したクリックの数。1ずつ増加します。

つまり、このプロパティの値をチェックして、それが3かどうかを確認できます。

window.addEventListener('click', function (evt) {
    if (evt.detail === 3) {
        alert('triple click!');
    }
});

作業デモ： http://jsfiddle.net/L6d0p4jo/

IE 8のサポートが必要な場合、最善のアプローチは、ダブルクリックをキャプチャしてから、トリプルクリックをキャプチャすることです。たとえば、次のようになります。

var timer,          // timer required to reset
    timeout = 200;  // timer reset in ms

window.addEventListener("dblclick", function (evt) {
    timer = setTimeout(function () {
        timer = null;
    }, timeout);
});
window.addEventListener("click", function (evt) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
        executeTripleClickFunction();
    }
});

作業デモ： http://jsfiddle.net/YDFLV/

これは、古いIEブラウザがダブルクリックに対して2つの連続したクリックイベントを発生させないためです。 IE 8のattachEventの代わりにaddEventListenerを使用することを忘れないでください。

61
Andy E

DOMレベル2以降、マウスクリックハンドラーを使用して、イベントのdetailパラメーターを確認できます。

UIEventから継承された詳細属性は、ユーザーの操作中に同じ画面上の場所でマウスボタンが押されて離された回数を示します。ユーザーがこのアクションを開始すると、属性値は1になり、押してから離すという完全なシーケンスごとに1ずつ増加します。ユーザーがマウスダウンとマウスアップの間でマウスを動かすと、値は0に設定され、クリックが発生していないことを示します。

したがって、detail === 3の値は、トリプルクリックイベントを提供します。

仕様の詳細については http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent をご覧ください。

@Nayukiのおかげで https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail -WIPであるDOM3拡張機能 https：// w3c .github.io/uievents /

17
Artem Oboturov

これが実際のトリプルクリックイベントです。3つのクリックすべてが等間隔で発生したときにのみトリガーされます。

// Default settings
var minClickInterval = 100,
    maxClickInterval = 500,
    minPercentThird = 85.0,
    maxPercentThird = 130.0;

// Runtime
var hasOne = false,
    hasTwo = false,
    time = [0, 0, 0],
    diff = [0, 0];

$('#btn').on('click', function() {
    var now = Date.now();
    
    // Clear runtime after timeout fot the 2nd click
    if (time[1] && now - time[1] >= maxClickInterval) {
        clearRuntime();
    }
    // Clear runtime after timeout fot the 3rd click
    if (time[0] && time[1] && now - time[0] >= maxClickInterval) {
        clearRuntime();
    }
    
    // Catch the third click
    if (hasTwo) {
        time[2] = Date.now();
        diff[1] = time[2] - time[1];
        
        var deltaPercent = 100.0 * (diff[1] / diff[0]);
        
        if (deltaPercent >= minPercentThird && deltaPercent <= maxPercentThird) {
            alert("Triple Click!");
        }
        clearRuntime();
    }
    
    // Catch the first click
    else if (!hasOne) {
        hasOne = true;
        time[0] = Date.now();
    }
    
    // Catch the second click
    else if (hasOne) {
        time[1] = Date.now();
        diff[0] = time[1] - time[0];
        
        (diff[0] >= minClickInterval && diff[0] <= maxClickInterval) ?
            hasTwo = true : clearRuntime();
    }  
});

var clearRuntime = function() {
    hasOne = false;
    hasTwo = false;
    time[0] = 0;
    time[1] = 0;
    time[2] = 0;
    diff[0] = 0;
    diff[1] = 0;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click button three times with equal interval
<button id="btn">Click me</button>

また、私は jquery plugin TrplClick と書いて、「trplclick」イベントを有効にします

3
Deliaz

正しく実行すれば非常に簡単です。シングル、ダブル、トリプルなどのクリックをキャッチすることもできます。プレーンなJavaScript、カスタマイズ可能なクリック遅延（タイムアウト）：

var clicks = 0;
var timer, timeout = 350; // time between each click

var doubleClick = function(e) {
  console.log('doubleClick');
}

var tripleClick = function(e) {
  console.log('tripleClick');
}

// click timer
yourcontainer.addEventListener('click', function(e) {
  clearTimeout(timer);
  clicks++;
  var evt = e;
  timer = setTimeout(function() {
    if(clicks==2) doubleClick(evt);
    if(clicks==3) tripleClick(evt);
    clicks = 0;
  }, timeout);
});
1
Bernhard

疑似コード：

var clicks = 0

onclick:
clicks++;
setTimer(resetClicksToZero);
if clicks == 3: tripleclickdetected(); clicks = 0;
1
Jack M

私はJavaScriptコードエディターで作業しており、トリプルクリックをリッスンする必要がありました。ほとんどのブラウザーで機能するソリューションは次のとおりです。

// Function to get mouse position
var getMousePosition = function (mouseEvent) {
    var currentObject = container;
    var currentLeft = 0;
    var currentTop = 0;
    do {
        currentLeft += currentObject.offsetLeft;
        currentTop += currentObject.offsetTop;
        currentObject = currentObject.offsetParent;
    } while (currentObject != document.body);
    return {
        x: mouseEvent.pageX - currentLeft,
        y: mouseEvent.pageY - currentTop
    }
}

// We will need a counter, the old position and a timer
var clickCounter = 0;
var clickPosition = {
    x: null,
    y: null
};
var clickTimer;

// The listener (container may be any HTML element)
container.addEventListener('click', function (event) {

    // Get the current mouse position
    var mousePosition = getMousePosition(event);

    // Function to reset the data
    var resetClick = function () {
        clickCounter = 0;
        var clickPosition = {
            x: null,
            y: null
        };
    }

    // Function to wait for the next click
    var conserveClick = function () {
        clickPosition = mousePosition;
        clearTimeout(clickTimer);
        clickTimer = setTimeout(resetClick, 250);
    }

    // If position has not changed
    if (clickCounter && clickPosition.x == mousePosition.x && clickPosition.y == mousePosition.y) {
        clickCounter++;
        if (clickCounter == 2) {
            // Do something on double click
        } else {
            // Do something on triple click
            resetClick();
        }
        conserveClick();
    } else {
        // Do something on single click
        conserveClick();
    }
});

Firefox 12、Google Chrome 19、Opera 11.64、Internet Explorer 9でテスト済み

このアプローチでは、ユーザーがカーソルの位置を変更していないかどうかを確認します。シングルクリックまたはダブルクリックしても、何かを実行できます。このソリューションがトリプルクリックイベントリスナーを実装する必要があるすべての人に役立つことを願っています:)

0
micnic