Хром устанавливает курсор на текст при перетаскивании, почему?

Ответ 1

Ни один из этих решений не работал у меня, потому что он слишком много кода.

Я использую пользовательскую реализацию jQuery для выполнения перетаскивания, и добавление этой строки в обработчик mousedown помогло в Chrome.

e.originalEvent.preventDefault();

Ответ 2

Попробуйте отключить событие выбора текста.

document.onselectstart = function(){ return false; }

Это отключит текст любой на странице, и кажется, что браузер начинает показывать пользовательские курсоры.

Но помните, что выбор текста не будет работать вообще, поэтому лучше всего сделать это только при перетаскивании и снова включить его после этого. Просто присоедините функцию, которая не возвращает false:

document.onselectstart = function(){ return true; }

Ответ 3

Если вы хотите запретить браузеру выбирать текст внутри элемента и показывать курсор выбора, вы можете сделать следующее:

element.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);

Ответ 4

Pitfall

Вы не можете поместить

document.onselectstart = function(){ return false; };

в ваш обработчик "mousedown", потому что onselectstart уже запущен.

Решение

Таким образом, чтобы он работал, вам нужно сделать это до события mousedown. Я сделал это в событии mouseover, так как, как только мышь входит в мой элемент, я хочу, чтобы он был перетаскиваем, а не выбираем. Затем вы можете поместить

document.onselectstart = null;

вызов события mouseout. Однако есть улов. Во время перетаскивания можно вызвать событие mouseover/mouseout. Чтобы противостоять этому, в вашем событии dragging/mousedown установите флаг_dragging в true и установите для него значение false при перетаскивании стоп (mouseup). Функция mouseout может проверить этот флаг перед настройкой

document.onselectstart = null;

Пример

Я знаю, что вы не используете какую-либо библиотеку, но здесь пример кода jQuery, который может помочь другим.

var flag_dragging = false;//counter Chrome dragging/text selection issue
$(".dragme").mouseover(function(){
    document.onselectstart = function(){ return false; };
}).mouseout(function(){
    if(!flag_dragging){
        document.onselectstart = null;
    }
});

//make them draggable
$(".dragme").draggable({
    start: function(event, ui){
        flag_dragging = true;
    }, stop: function(event, ui){
        flag_dragging = false;
    }
});

Ответ 5

Я решил одну и ту же проблему, сделав Elements нецелесообразным, и добавив активный класс псевдо-класса на одетые элементы:

* {
    -webkit-user-select: none; 
}

.your-class:active {
    cursor: crosshair;
}

Ответ 6

У меня аналогичная проблема с использованием jQuery UI draggable и sortable (версия 1.8.1), и это довольно специфично, поэтому я предполагаю, что вы используете ту же библиотеку.

Проблема вызвана ошибкой в ​​пользовательском интерфейсе jQuery (на самом деле это исправление для другой ошибки Safari). Я просто поднял вопрос в пользовательском интерфейсе jQuery http://dev.jqueryui.com/ticket/5678, поэтому, думаю, вам нужно будет подождать, пока он не будет исправлен.

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

if ($.browser.safari) {
    $.ui.mouse.prototype.__mouseDown = $.ui.mouse.prototype._mouseDown;
    $.ui.mouse.prototype._mouseDown = function(event){
        event.preventDefault();
        return $.ui.mouse.prototype.__mouseDown.apply(this, arguments);
    }
}

Он просто отключает исправление, которое в коде jQuery UI, поэтому в основном это может сломать.

Ответ 7

Просто используйте эту строку внутри события mousedown

arguments[0].preventDefault();

Вы также можете отключить выбор текста с помощью CSS, добавляя этот класс к вашему перетаскиваемому элементу

.nonselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Ответ 8

У меня была почти такая же проблема. Я хочу, чтобы курсор внутри моего элемента DIV и все его дочерние элементы были по умолчанию, советы CSS здесь помогли в IE, FF и Opera, но не для Google Chrome. Вот что я сделал в родительском DIV:

<div ... onselectstart="return false;" ... > ... </div>

Теперь он работает нормально. Надеюсь на эту помощь.