HTML5 tuval dışında metin seçimini nasıl önlerim çift tıklatıldığında?

Question

(Denediğim her tarayıcıda), bir HTML5 kanvasına çift tıklamak, tuval öğesini hemen takip eden herhangi bir metni seçer. Tıklamaları tuval ile sınırlı tutmayı tercih ederim.

(Nb: Metin seçimini tamamen kapatmak istemiyorum (örneğin, this): Metni çift tıklatırsanız, tıklatıp tıklatmak istemiyorum. .)

Bu mümkün mü? Bu sorunu gösteren a simple page.

Answer 1

İlk önce, tuvalinizin sayfanın genişliğini doldurmadığını ve yalnızca 100 piksel genişliğinde olduğunu unutmayın. Genişlik ve yükseklik tuval öznitelikleri her zaman piksellere ayrıştırılır; bu nedenle, yazma genişliği = "% 100", Canvas etiketi söz konusu olduğunda 100 piksel anlamına gelir.

//give your canvas an id, I used 'can'  
var canvas = document.getElementById('can'); 
canvas.onselectstart = function() { return false; } 

çift tıklayın metin sorunu artık ortaya çıkar:

javasript yazma, sorunuzu cevaplamak için.

Answer 2

Javascript kullanarak sayfadaki öğeleri sürükleyip bırakma yeteneğini etkinleştirdiğim çok benzer bir durumla karşılaştım.

Bu sorunu çözmek için, metin seçim olayını yakalama yeteneğine sahipsiniz ve yanlış döndüğünüzde olayın yakalanması durumunda, seçim hiçbir zaman gerçekleşmeyecektir. Bunun iyi bir örnek için

kullanmak için konduğunu, lütfen referans verin: http://chris-barr.com/entry/disable_text_selection_with_jquery/

Bahis şanslar: http://www.dynamicdrive.com/dynamicindex9/noselect.htm

jQuery framework aşina Alternatif eğer, mükemmel basit ve etkili bir eklenti mevcuttur sana!

Answer 3

Tuval nesnesini numaralı telefona diğer tüm HTML kodlarını'dan sonra eklemeyi deneyin. Bu problemi yaşadım, tek yapmam gereken yüzer CSS div'larımı (yukarıda) bir tuval etiketinde (div içinde bulunan) kodun içine koymaktı.

Sadece bunu başkalarına yardımcı olması durumunda yazacağımı düşündüm.