Остановите слишком быстрый запуск сенсорного пуска при прокрутке - PullRequest
Новая
       9

Остановите слишком быстрый запуск сенсорного пуска при прокрутке

7 голосов
/ 23 марта 2012

Я пытаюсь выяснить, как решить, какой прослушиваемый класс присваивается элементам при прокрутке, но он действует слишком быстро, и мне нужно немного отложить его, когда он фактически касается, а не касается во время прокрутки, это мой код того, как это работает: 

$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
    var self = $(this);

    self.addClass(self.data('tappable-role'));
}).bind('touchend', function()
{
    var self = $(this);
    self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
    var self = $(this),
        goTo = self.data('goto');

    if(typeof goTo !== 'undefined')
    {
        window.location = goTo;
    }
});

При прокрутке он назначит класс элементу, когда я едва коснулся его, и я хочу, чтобы это не происходило, если к нему не прикасаться (не нажимать). Хотя я попытался поэкспериментировать с setTimeout, но это не работает, так как это задерживает, но он все равно назначит класс позже.

Вот как я это сделал с помощью setTimeout: 

var currentTapped;
$('div, a, span').filter('[tappable][data-tappable-role]').bind('touchstart', function()
{
    clearTimeout(currentTapped);

    var self = $(this);

    var currentTapped = setTimeout(function()
    {
        self.addClass(self.data('tappable-role'));
    }, 60);
}).bind('touchend', function()
{
    clearTimeout(currentTapped);

    var self = $(this);
    self.removeClass(self.data('tappable-role'));
}).bind('click', function()
{
    clearTimeout(currentTapped);

    var self = $(this),
        goTo = self.data('goto');

    if(typeof goTo !== 'undefined')
    {
        window.location = goTo;
    }
});

Как я могу сделать это эффективным способом?

Вам нужно просмотреть его на своем iPhone / iPod / iPad или эмуляторе для проверки скрипки.

UPDATE: 

function nextEvent() 
{
    $(this).on('touchend', function(e)
    {
        var self = $(this);

        self.addClass(self.data('tappable-role')).off('touchend');
    })
    .on('touchmove', function(e)
    {
        var self = $(this);

        self.removeClass(self.data('tappable-role')).off('touchend');
    })
    .click(function()
    {
        var self = $(this),
            goTo = self.data('goto');

        if(typeof goTo !== 'undefined')
        {
            window.location = goTo;
        }
    });
}

$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);

Ответы [ 2 ]

20 голосов
/ 24 марта 2012

Вот как я это сделал:

По сути, когда вы перемещаетесь по странице, которую вы собираетесь нажать или прокрутить. (Ну, есть и другие вещи, такие как пинч и слайд, вы можете выяснить их позже) ...

Таким образом, при прикосновении к вашему «прикосновению» последует «прикосновение» На свитке за вашим «прикосновением» последует «прикосновение»

Используя Jq 1.7 ... в других версиях вы можете использовать .bind () 

function nextEvent() {
    //behaviour for end
    $(this).on('touchend', function(e){
        /* DO STUFF */
        $(this).off('touchend');
    });
    //behaviour for move
    $(this).on('touchmove', function(e){
        $(this).off('touchend');
    });     
}

$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);

По сути, когда происходит «запуск прикосновением», я связываю действия с «прикосновением» и «движением прикосновением».

«Touchend» делает все, что я хочу, чтобы касание делало, и затем связывает себя «Touchmove» в основном ничего не делает, кроме «unbind» touchend '

Таким образом, если вы нажмете, вы получите действие, если вы прокручиваете, ничего не происходит, кроме прокрутки ..

ОТВЕТ НА КОММЕНТАРИЙ: Если я правильно понимаю ваш комментарий, попробуйте следующее: 

function nextEvent() {
    var self = $(this);
    self.addClass(self.data('tappable-role'))
    //behaviour for move
    $(this).on('touchmove', function(e){
         self.removeClass(self.data('tappable-role'));
    });     
}

$('div, a, span').filter('[tappable][data-tappable-role]').on('touchstart', this, nextEvent);
3 голосов
/ 23 апреля 2016

Несмотря на то, что это относительно старый вопрос с лучшим выбором ответа, я хочу поделиться своим решением.Я добился этого, вызывая события одним щелчком мыши. 

$("div, a, span").on("click", function() {
    // Your code here
}

Возможно, это не лучший способ сделать это, но у меня это сработало.

...