Событие mouseup

Есть такой код

    swipes: function (status) {
        if (status) {
            this.bindTo( this.elem('view'), 'mousedown', this._swipeStart );
            this.bindTo( this.elem('view'), 'mouseup', this._swipeEnd );
        }
    },

    _swipeStart: function (e) {
        console.log(e);
        this._tmpSwipeStart = e.pageX;
    },

    _swipeEnd: function (e) {
        console.log(e);
        if ((e.pageX - this._tmpSwipeStart) > 50) {
            this.previous();
        }
        if ((e.pageX - this._tmpSwipeStart) < -50) {
            this.next();
        }
    },

Событие на mouseup не срабатывает. Не могу понять в чём дело.

10 years ago

belozer

а нет... Срабатывает. Но при перетаскивании мыши в нажатом состоянии - нет. Думаю нужно сделатьuser-select: none или что-то подобное

10 years ago

belozer

сделал, вот решение (думаю сделать реализацию более качественной)

        if (status) {
            this.bindTo( this.elem('view'), 'mousedown', this._swipeStart );
            this.bindTo( this.elem('view'), 'mouseup', this._swipeEnd );
            this.elem('view').on('dragstart', function(e) { e.preventDefault(); });
        }

10 years ago

apsavin

Почему вы используете mousedown/mouseup, а не pointer events? Вам не нужна работа на мобильных устройствах?

10 years ago

belozer

@apsavin Нужна. Сейчас сделал возможность прокрутки мышкой, далее по плану пальцы.

10 years ago

apsavin

Тогда почему не используете pointer events?

10 years ago

belozer

@apsavin Спасибо за наводку )

10 years ago

apsavin

@belozyorcev пожалуйста) Настоятельно рекомендую пройтись по всем блокам в bem-core, ~~RTFM~~ почитать доки.

10 years ago

kompolom

Кроме jsdoc есть что почитать по pointer events?

10 years ago

apsavin

Ну вот тут есть

10 years ago

apsavin

Ну или тут, если вообще)

10 years ago

Guria

Вот эта строка тоже укажет направление для изучения

10 years ago

belozer

@apsavin в приведённой документации БЭМ модуль подключается так

deps.js

({
    shouldDeps : [
        { block : 'jquery', elem : 'event', mods : { type : 'pointer' } }
    ]
})

    ['i-bem__dom', 'jquery__event_type_pointer'],
    function(provide, BEMDOM, $) {

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

    ['i-bem__dom', 'jquery'],
    function(provide, BEMDOM, $) {

Сейчас всё заработало. Вот не знаю... Или документация устарела, или я не совсем что-то понимаю.

П.Н. Карусель на телефоне получилась отзывчивей, чем Owl Carousel, чему очень рад :santa:

10 years ago

apsavin

Похоже на опечатку https://github.com/bem/bem-core/pull/945.

10 years ago

tadatuta

@apsavin @belozyorcev да, в доке действительно была опечатка, спасибо за бдительность и PR! PS: для подписки через bindTo() и зависимость от jquery не нужна.

10 years ago

belozer

@tadatuta в коде jquery используется других местах

10 years ago

sipayRT

просто для отвода души:

конструкцию

this.bindTo( this.elem('view'), 'mousedown', this._swipeStart );
this.bindTo( this.elem('view'), 'mouseup', this._swipeEnd );

можно записать проще:

this.bindTo('view', {
    mousedown : this._swipeStart,
    mouseup : this._swipeEnd
});

10 years ago

belozer

@sipayRT Спасибо за наводку :)

Чтобы оставлять комментарии, необходимо авторизоваться.