TouchLeave для элемента DOM - PullRequest
Новая
       17

TouchLeave для элемента DOM

2 голосов
/ 10 августа 2011

хорошо, вот сделка. Мне нужен элемент div на моей странице, который увеличивает число на странице, пока она нажата. Это довольно просто, но я хочу, чтобы это работало и на устройствах iPad и Android.

Я использую событие touchstart, используя jquery bind для div. Используя setInterval, я обновляю номер (я могу использовать вызов setTimeout каждый раз, когда число увеличивается, но это не имеет значения). Я хочу, чтобы интервал очищался, когда палец (касание) выходит за пределы деления. К сожалению, touchend не вызывается, пока палец не будет выпущен с экрана. Мобильное сафари или webkit не поддерживают touchleave.

Итак, вот мой вопрос: есть ли идеи о том, как имитировать touchleave?

Ответы [ 3 ]

3 голосов
/ 10 августа 2011

Основываясь на ответе выше, вот что я делаю. 

var $this = $('elementselector');
var fnmove = function (e) {
e.preventDefault();
e = e.originalEvent;
var touch = e.touches[0] || e.changedTouches[0];
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) {
        $this.trigger(touch_leave_event);
        $this.unbind(touch_move_event, fnmove);
    };
};
$this.bind(touch_move_event, fnmove);

- функция inbounds 

function _isInBounds(touch, elemposition, width, height) {
    var left = elemposition.left,
        right = left + width,
        top = elemposition.top,
        bottom = top + height,
        touchX = touch.pageX,
        touchY = touch.pageY;

    return (touchX > left && touchX < right && touchY > top && touchY < bottom);
};
2 голосов
/ 10 августа 2011

РЕДАКТИРОВАТЬ (спасибо Гийому за завершение): 

var $this = $('elementselector');
var fnmove = function (e) {
e.preventDefault();
e = e.originalEvent;
var touch = e.touches[0] || e.changedTouches[0];
    if (!_isInBounds(touch, $this.offset(), $this.outerWidth(), $this.outerHeight())) {
        $this.trigger(touch_leave_event);
        $this.unbind(touch_move_event, fnmove);
    };
};
$this.bind(touch_move_event, fnmove);

function _isInBounds(touch, elemposition, width, height) {
    var left = elemposition.left,
        right = left + width,
        top = elemposition.top,
        bottom = top + height,
        touchX = touch.pageX,
        touchY = touch.pageY;

    return (touchX > left && touchX < right && touchY > top && touchY < bottom);
};

Извините за короткий ответ, я ухожу с работы.Я вернусь, чтобы заполнить пробелы.Но вы должны понять.

1 голос
/ 25 марта 2015

Лучший метод, который я нашел, это проверить положение точки касания в вашем обработчике сенсорного перемещения.Когда создается точка прикосновения (при запуске прикосновения), она добавляется в массив, называемый «прикосновения».Эти точки касания могут быть доступны по индексу (порядок, в котором они были добавлены).Затем вы можете получить доступ к координатам x и y из этой точки, чтобы определить, находится ли он все еще в границах элемента, который вы наблюдаете.Допустим, у меня есть div с именем «myDiv», и я хочу определить, когда палец пользователя вытаскивается из него изнутри. 

var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('touchmove', function(event){
    var currentElement = document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
    if (currentElement.id !== 'myDiv'){
        console.log('finger has moved outside of element');
    }
}, false);

Поэтому, когда мы перемещаем наш палец, мы фиксируем элемент, который в данный момент находится на нем.с функцией document.elementFromPoint (), передавая координаты x и y, собранные из касания, сохраненного в массиве касаний, с индексом 0 (дополнительные касания будут добавлены в массив с индексами 1, 2, 3 и т. д.),Наконец, мы проверяем, совпадает ли этот захваченный элемент, в котором находится наш палец, с «myDiv».Если это не так, мы знаем, что палец был убран с этого элемента.

...