Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2019, 13:55
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 23

Скролл контента при удержании левой кнопки мыши
Подскажите, как сделать чтобы при удержании левой кнопки мыши не происходил клик по ссылки. А если кликнуть по ссылке был переход.
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Скроллинг мышью</title>
<style type="text/css">
.scroll 
{   position:absolute;
    top:10px;
    left:100px;
	height: 100px;
	overflow-x: auto;
	width: 200px;
       cursor: all-scroll;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var scr = $(".scroll");
        scr.mousedown(function () {
            var startX = this.scrollLeft + event.pageX;
            var startY = this.scrollTop + event.pageY;
            scr.mousemove(function () {
                this.scrollLeft = startX - event.pageX;
                this.scrollTop = startY - event.pageY;
                return false;
            });
        });
        $(window).mouseup(function () {
            scr.off("mousemove"); 
        });
    }
</script>

</head>
<body>
<div class="scroll">
  <a href="#"><img src="1.jpg"/></a>
  <a href="#"><img src="2.jpg"/></a>
</div>
</body>
</html>

Последний раз редактировалось Андрей812, 15.08.2019 в 20:25.
Ответить с цитированием
  #2 (permalink)  
Старый 23.08.2019, 14:20
Профессор
Отправить личное сообщение для demoniqus Посмотреть профиль Найти все сообщения от demoniqus
 
Регистрация: 28.05.2008
Сообщений: 181

У тебя тема не соответствует телу вопроса.

let src = $('.scroll');
let currentSrc;
src.mousedown(function(e){
  currentSrc = e.targetEvent;
});
src.mouseup(function(e){
  if (e.targetEvent !== currentSrc) {
     e.preventDefault ? e.preventDefault() : e.cancelBubble = true;
     return false;
  }
})


Если объекты, на которых возникли mouseDown и mouseUp отличаются, то нужно погасить событие mouseUp. Тогда не должен возникнуть click по ссылке. Также вообще-то следует предусмотреть выход курсора за пределы окна - в таком случае события mouseUp может не возникнуть и не выполнится проверка, останавливающая развитие события. Стоит довесить mouseout...

Кроме того, ЗАРУБИ на носу, иначе когда-нибудь потеряешь мозг - jQuery не устанавливает обработчик, а добавляет его в очередь. Поэтому конструкция, когда ты внутри mouseDown делаешь src.mouseMove(function (){}) приведет к тому, что у тебя по мере последующих mouseDown на элементе будет расти количество одинаковых обработчиков. Поверь, ничего хорошего это не сулит...

Кстати, я не уверен что mouseup стоило вешать на window в твоем случае. Уж скорее на body.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
плавный скролл при нажатии на кнопки клавиатуры(вниз, вверх) JohnJohn Общие вопросы Javascript 19 28.12.2017 02:40
Горизонтальный скролл блоков при вертикальном скролле b4rret Элементы интерфейса 0 28.10.2017 20:25
Движение курсора над элементом при зажатой кнопки мышки Demath Общие вопросы Javascript 5 12.09.2013 16:32
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 21:05
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 12:43