2012-01-20 41 views
9

Trong Chrome (Tôi đang sử dụng phiên bản 16.0.912.75 m trên Win 7), tôi thấy rằng dù tôi đặt con trỏ là gì, ngay khi tôi giữ nút chuột trái và di chuyển con trỏ sau đó loại con trỏ được thay đổi thành text (ngay cả khi không có văn bản ở bất kỳ đâu trên trang).Lỗi Chrome? Thay đổi con trỏ trên chuột xuống + di chuyển

Đây có phải là lỗi không? Có ai biết làm thế nào để có được xung quanh nó vì nó là làm cho công cụ kéo và thả của tôi trông một chút ngớ ngẩn!

JSFiddle: http://jsfiddle.net/KJfbs/

Sửa

Như đã trả lời bởi @davgothic dưới đây, thêm -webkit-user-select: none; sẽ khắc phục vấn đề khi không có văn bản. Tuy nhiên, chúng ta nên xác định vị trí các yếu tố hoàn toàn và đặt văn bản phía sau nó sau đó vấn đề vẫn tồn tại.

JSFiddle: http://jsfiddle.net/KJfbs/2/

Trả lời

10

Hãy thử thêm -webkit-user-select: none; với CSS cho yếu tố đó để ngăn việc chọn văn bản.

Ví dụ: http://jsfiddle.net/KJfbs/1/

Cá nhân tôi cũng sẽ thêm những ...

-webkit-user-select: none; 
-khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
     user-select: none; 

... cho khả năng tương thích trình duyệt chéo.

+1

+1 - cảm ơn, mà không làm việc cho các ví dụ trong câu hỏi của tôi. Thật không may điều này dường như không hoạt động khi div được đặt hoàn toàn phía trên văn bản. Bạn có bất kỳ ý tưởng tại sao điều này có thể? –

+0

Tôi không thực sự chắc chắn, như một phương sách cuối cùng bạn có thể đặt '-webkit-user-select: none;' thành phần tử chứa văn bản. Người dùng sẽ mất khả năng chọn văn bản đó. [Đây là một ví dụ] (http://jsfiddle.net/KJfbs/3/). –

+0

Vâng, tôi cho rằng đó là một lựa chọn. Cảm ơn - Tôi sẽ đợi xem có ai có thể đưa ra lời khuyên về chỉnh sửa của tôi trước khi tôi chấp nhận câu trả lời của bạn không. –

0

Tôi nghĩ rằng với -webkit-user-select: none; vấn đề vẫn tồn tại nếu bạn đặt bất kỳ thứ gì khác trong trang. Ví dụ: http://jsfiddle.net/KJfbs/237/

Dù sao tôi nghĩ rằng jQuery preventDefault giải quyết vấn đề trong mọi trường hợp: http://jsfiddle.net/KJfbs/241/

preventDefault tránh hành vi mặc định đó là sự thay đổi cho văn bản con trỏ.
Sau đó, tôi có thể kiểm soát và đặt bất kỳ con trỏ nào tôi muốn: $ (this) .css ("cursor", "wait");

jQuery:

$(function(){ 
    $('#lime').mousedown(function(e) { 
     e.preventDefault(); 
     $(this).css("cursor","wait"); 
    }).on('mouseup mouseleave', function() { 
     $(this).css("cursor","default"); 
    }); 
}); 

HTML:

<div id="lime"></div> 
<p>Lorem ipsum dolor sit amet</p> 

CSS:

#lime { 
    background-color: lime; 
    height: 100px; width: 300px; 
    cursor: wait; 
    position: absolute; 
    top: 0; left: 0; 
} 
Các vấn đề liên quan