Как заставить курсор мыши сделать захват мыши? - PullRequest
Новая
       6

Как заставить курсор мыши сделать захват мыши?

8 голосов
/ 11 сентября 2011

Я сделал демо на JSFIDDLE
ОБНОВЛЕНИЕ эта версия работает в FF, но не в Chrome ..
ОБНОВЛЕНИЕ 2 Этот веб-сайт , кажется, имеет рабочее решение.

Мой Javascript выглядит следующим образом 

$("#click").live({
  mousedown: function() {
            this.addClass("closed");
        },
  mouseup: function() {
            this.removeClass("closed");
        }
});

, а CSS выглядит следующим образом 

.closed {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

Но почему этот код jQuery не превращает курсор в закрытую руку мыши?Спасибо вам большое!Любая помощь будет оценена!

Ответы [ 8 ]

6 голосов
/ 04 декабря 2015

Вы можете получить курсор мыши только с помощью CSS: 

/* Standard cursors */    
.element { cursor: grab; }
.element:active { cursor: grabbing; }

/* Custom cursors */
.element { cursor: url('open-hand.png'), auto; }
.element:active { cursor: url('closed-hand.png'), auto; }
4 голосов
/ 18 мая 2016

2016 Обновление:

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

css: 

.element:hover{
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.element.grabbing { 
    cursor: grabbing; 
    cursor: -webkit-grabbing;
}

JS: 

$(".element").on("mousedown touchstart", function(e) {
    $(this).addClass('grabbing')
})

$(".element").on("mouseup touchend", function(e) {
    $(this).removeClass('grabbing')
})
1 голос
/ 07 ноября 2012 
$(document).ready(function() {
  $(".surface").mouseup(function(){
        $(".surface").css( "cursor","crosshair");
      }).mousedown(function(){
        $(".surface").css( "cursor","wait");
      });
});

Сделать в CSS .surface{cursor:crosshair;} Если вы хотите, чтобы указатель мыши был вниз / вверх, просто измените курсоры на значок «вверх / вниз». Надеюсь, это поможет.

1 голос
/ 11 сентября 2011

Я разделил эти два события.

http://jsfiddle.net/genesis/uZ377/23/

Однако, похоже, он не работает в Chrome, но работает в Firefox.

1 голос
/ 11 сентября 2011

Это работает (по крайней мере, в FF): http://jsfiddle.net/uZ377/21/

Я изменил концерт, чтобы связать, не знаю почему, но концерт не сработал. Также я поместил this в функцию jQuery.

0 голосов
/ 01 мая 2012

Начал работать в Safari после добавления event.preventDefault () http://jsfiddle.net/uZ377/49/

0 голосов
/ 11 сентября 2011

используемый вами синтаксис не был представлен до 1.4.3 ( задокументировано здесь ), ваш jsFiddle использует 1.4.2. Ваш jsFiddle также добавляет класс к this вместо $(this).

Но я также не уверен относительно того, как курсор CSS реагирует на mousedown и mouseup - у меня есть ощущение, что оно может быть ограничивающим в некоторых браузерах, немного поиграл с мышью, но не mousedown - что странно .

0 голосов
/ 11 сентября 2011

На самом деле похоже, что существует проблема с методом live для привязки событий mousedown и mouseup. Разделяя два элемента, кажется, что все в порядке.

В любом случае, часть URL свойства курсора поддерживается не во всех браузерах. Посмотрите, например, на Chrome и Firefox, он работает нормально для меня, но не в Opera, поскольку, насколько я знаю, не поддерживает его.

...