chrome setzt den Cursor beim Ziehen auf den Text, warum?

Meine Anwendung hat viele drag-und-drop-Funktionen. Während Sie den Mauszeiger ziehen, ich will den cursor zu ändern, um einige greifen cursor. Internet Explorer und Firefox funktionieren gut für diese, aber Chrome immer ändert den cursor, um den text-cursor.

InformationsquelleAutor der Frage user307635 | 2010-04-30

71

Keine dieser Lösungen war für mich, weil es zu viel code.

Ich benutze eine benutzerdefinierte jQuery-Implementierung zu tun, die ziehen, und fügen Sie diese Zeile in der mousedown handler hat den trick für mich in Chrom.
```
e.originalEvent.preventDefault();
```
InformationsquelleAutor der Antwort tim
22

Deaktivieren Sie text-Auswahl-Ereignis.
```
document.onselectstart = function(){ return false; }
```
Deaktiviert das alle text-Auswahl auf der Seite und es scheint, dass der browser gestartet wird, um zu zeigen, benutzerdefinierte Cursor.

Aber denken Sie daran, dass die text-Auswahl wird überhaupt nicht funktionieren, also ist es das beste, es zu tun, nur beim ziehen, und schalten Sie es dann wieder nur nach, dass. Befestigen Sie einfach die Funktion, dass nicht return false:
```
document.onselectstart = function(){ return true; }
```
InformationsquelleAutor der Antwort bartaz
17

Wenn Sie verhindern möchten, dass der browser für die Auswahl von text in einem element und zeigt den select-cursor, können Sie Folgendes tun:
```
element.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);
```
InformationsquelleAutor der Antwort Lorenzo Polidori
7

Fallstrick

Können Sie nicht setzen die
```
document.onselectstart = function(){ return false; };
```
in Ihrem "mousedown" - handler, weil onselectstart bereits ausgelöst wurde.

Lösung

So, das es funktioniert, müssen Sie es tun, bevor das Ereignis mousedown. Ich habe es in der mouseover-Ereignis, da, sobald die Maus in meinen element, ich will, dass es gezogen werden kann, ist nicht wählbar. Dann können Sie die
```
document.onselectstart = null;
```
Aufruf in den mouseout-event. Aber es gibt einen Haken. Während Sie ziehen, wird der mouseover - /mouseout-Ereignis bezeichnet werden könnten. Um entgegenzuwirken, in Ihrem ziehen/mousedown-Ereignis festlegen einer flag_dragging auf true und auf false gesetzt, wenn das ziehen anhält (mouseup). Die mouseout-Funktion können Sie überprüfen, wie die Flagge, bevor Sie
```
document.onselectstart = null;
```
Beispiel

Ich weiß, Sie sind nicht mit einer Bibliothek, aber hier ist ein jQuery-code-Beispiel, das könnte anderen helfen.
```
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;
    }
});
```
InformationsquelleAutor der Antwort Finch_Powers
5

Löste ich ein Gleiches Problem, indem Sie die Elemente nicht ausgewählt werden, und indem eine aktive pseudo-Klasse auf die Elemente gezogen:
```
* {
    -webkit-user-select: none; 
}

.your-class:active {
    cursor: crosshair;
}
```
InformationsquelleAutor der Antwort shex
2

Ich habe ein ähnliches Problem mit jQuery UI draggable und sortierbar (ver. 1.8.1), und es ist ziemlich speziell, so dass ich davon ausgehen, dass Sie mit der gleichen Bibliothek.

Problem wird verursacht durch einen bug in jQuery UI (eigentlich ein fix für andere Safari-bug).
Ich hob nur die Ausgabe in jQuery UI http://dev.jqueryui.com/ticket/5678 also ich denke, man wird warten müssen, bis es behoben ist.

Ich gefunden habe, die eine Abhilfe für dieses, aber es ist ziemlich hard-core, so dass Sie nur verwenden, wenn Sie wirklich wissen, was Los ist 😉
```
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);
    }
}
```
Es wechselt einfach den fix, die in jQuery-UI-code, also im Grunde kann es Pause etwas.

InformationsquelleAutor der Antwort bartaz

Verwenden Sie einfach diese Zeile in Ihrem mousedown Veranstaltung

arguments[0].preventDefault();

Können Sie auch deaktivieren Sie text-Auswahl von CSS hinzufügen dieser Klasse zu Ihrem draggable element

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

InformationsquelleAutor der Antwort Vitim.us

2

Ich Stand vor dem fast gleichen problem. Ich möchte cursor innerhalb meiner DIV-element und allen seinen untergeordneten, der Standard-CSS-Tipps hier geholfen im IE, FF und Opera, aber nicht für Google Chrome. Hier ist, was ich getan habe im parent-DIV:

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

Nun, es ist in Ordnung. Hoffe, dass dies helfen.

InformationsquelleAutor der Antwort Alexandre Martins

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Fallstrick

Lösung

Beispiel