Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2018, 10:23
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Помоги отвязать функцию от jquery.
Добрый день. Есть функция прокрутки на jquery:
function scroll_page(){
    var scr = $(".scroll-js");
    scr.mousedown('click', function (event) {
        var startX = this.scrollLeft + event.pageX;
        var startY = this.scrollTop + event.pageY;
        scr.mousemove('click', function (event) {
            this.scrollLeft = startX - event.pageX;
            this.scrollTop = startY - event.pageY;
            return false;
        });
    });
    $(window).mouseup(function() {
        scr.off("mousemove");
    });
}


Переписал так, пока для getElementById:

function scroll_page(){
    var scr = document.getElementById('scroll');
    scr.addEventListener("mousedown", function(e){
        var startX = this.scrollLeft + e.pageX;
        var startY = this.scrollTop + e.pageY;
        scr.addEventListener("mousemove", function(e){
            this.scrollLeft = startX - e.pageX;
            this.scrollTop = startY - e.pageY;
            return false;
        });
    });
    window.addEventListener("mouseup", function(){
        scr.removeEventListener("mousemove");
    });
}


В конце при отпускании мышки ошибка, говорит для этой строки нужен второй аргумент.
scr.removeEventListener("mousemove");

Вроде как нужна функция, но я не могу сообразить как написать
Помогите пожалуйста, с учетом того что потом буду делать это для getElementsByClassName
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2018, 10:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,794

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

Как удалить обработчик смотрите тут:
https://learn.javascript.ru/introduc...eeventlistener
Ответить с цитированием
  #3 (permalink)  
Старый 11.12.2018, 11:18
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Nexus,

Написал так, ошибка пропала но отжатие мышки не прекращает mousemove:
function scroll_page(){
    var scr = document.getElementById('scroll');
    var startX, startY;

    var listener = function(e) {
        startX = this.scrollLeft + e.pageX;
        startY = this.scrollTop + e.pageY;
        scr.addEventListener('mousemove', endListener);
    };
    
    var endListener = function(e) {
        this.scrollLeft = startX - e.pageX;
        this.scrollTop = startY - e.pageY;
        return false;
    };

    scr.addEventListener('mousedown', listener);

    window.addEventListener("mouseup", function(){ 
        scr.removeEventListener('mousedown', endListener);
    });
}

Что не так сделал?(
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2018, 11:37
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Сейчас "не работает" так:
<div id="scroll" style="height: 100px; width: 200px; background-color: #444; color:white;overflow: hidden;">123<br>sadsa<br>123<br>111<br>123<br>4tr<br>fdfs<br>123<br>ere<br>eerr<br>123<br>123<br>dfdf<br>dfdd<br>dfdf<br></div>
<script>
window.onload = function() {
   scroll();
}
function scroll(){

var scr = document.getElementById('scroll');
    var startX, startY;

    var listener = function(e) {
        startX = this.scrollLeft + e.pageX;
        startY = this.scrollTop + e.pageY;
        scr.addEventListener('mousemove', endListener);
    };
    
    var endListener = function(e) {
        this.scrollLeft = startX - e.pageX;
        this.scrollTop = startY - e.pageY;
        return false;
    };

    scr.addEventListener('mousedown', listener);

    window.addEventListener("mouseup", function(){ 
        scr.removeEventListener('mousedown', endListener);
    });
}
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2018, 11:39
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Нашел ошибку, заработало =)
<div id="scroll" style="height: 100px; width: 200px; background-color: #444; color:white;overflow: hidden;">123<br>sadsa<br>123<br>111<br>123<br>4tr<br>fdfs<br>123<br>ere<br>eerr<br>123<br>123<br>dfdf<br>dfdd<br>dfdf<br></div>
<script>
window.onload = function() {
   scroll();
}
function scroll(){

var scr = document.getElementById('scroll');
    var startX, startY;

    var listener = function(e) {
        startX = this.scrollLeft + e.pageX;
        startY = this.scrollTop + e.pageY;
        scr.addEventListener('mousemove', endListener);
    };
    
    var endListener = function(e) {
        this.scrollLeft = startX - e.pageX;
        this.scrollTop = startY - e.pageY;
        return false;
    };

    scr.addEventListener('mousedown', listener);

    window.addEventListener("mouseup", function(){ 
        scr.removeEventListener('mousemove', endListener);
    });
}
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Аналог jQuery(...).animate на чистом JS 2chan Общие вопросы Javascript 3 12.07.2015 19:23
Динамический подсчет в таблице muraig jQuery 5 11.10.2014 16:54
Повесить jQuery функцию на каждую кнопку broadcast77 jQuery 5 09.09.2014 11:14
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
Как передать переменную в функцию с помощью JQuery??? Иван Я Events/DOM/Window 3 20.01.2012 11:21