Çift tıklandığında bir div öğesinin vurgulanması nasıl durdurulur

94

Arka plan resmine sahip bu div öğesine sahibim ve çift tıkladığımda div öğesini vurgulamayı bırakmak istiyorum. Bunun için bir CSS özelliği var mı?

— Dave
kaynak

Hangi tarayıcı kullanıyorsunuz? Testlerimde, Firefox 5, Chrome 12 veya IE9'da vurgulamak için tam bir div bulamadım.

— tw16

161

Aşağıdaki CSS, kullanıcıların metin seçmesini engeller. Canlı örnek: http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

IE9'u aşağı doğru ve Opera'yı hedeflemek için unselectablebunun yerine html niteliği kullanılmalıdır:

<div unselectable="on">Test Text</div>

— tw16
kaynak

bu, tüm div'in vurgulanmasını engellemedi. Sadece metin için olduğunu fark ettim. Çift tıklandığında tüm div'in vurgulanmasını önlemek istiyorum.

— dave

@dave: Çift tıklamanın vurgulamaya neden olduğu tek zaman, içinde metin olduğu zaman kastettiğin şey olduğunu varsaydım. Olumsuz oy kullanmanıza gerek yok.

— tw16

1

IE veya Opera'da çalışmıyor. unselectableÖzniteliğe ihtiyacınız var . -o-user-selectBu arada, hayır yok .

— Tim Down

SASS / SCSS kullanıcıları için not: @include user-select(none);ham CSS kullanmak yerine bunu yapabilirsiniz

— hilnius

Garip bir şekilde, bu, div'lerin ne zaman bile sürüklenebilir olmasına neden oldu draggable = false, ancak yalnızca Firefox'ta.

— rovyko

53

Bu benim için çalışıyor

html
{
  -webkit-tap-highlight-color:transparent;
}

— Hans
kaynak

Bu en iyi cevap olmalı.

— JohnA10

11

Bu yalnızca Chrome ve Safari gibi webkit tarayıcıları için geçerli olacak ve muhtemelen IE veya Firefox'un herhangi bir sürümünde çalışmayacaktır.

— Simon East

31

Chrome'da div vurgulamayı durdurmak için bir çözüm bulmaya çalışıyordum ve bu gönderiye döndüm. Ama maalesef cevapların hiçbiri sorunumu çözmedi.

Çok sayıda çevrimiçi araştırmadan sonra, düzeltmenin çok basit bir şey olduğunu buldum. Herhangi bir karmaşık CSS'ye gerek yoktur. Sadece aşağıdaki CSS'yi web sayfanıza ekleyin ve hazırsınız. Bu, dizüstü bilgisayarlarda ve mobil ekranlarda çalışır.

div { outline-style:none;}

NOT : Bu, Chrome Sürüm 44.0.2403.155 m'de çalıştı. Ayrıca, bu url'de açıklandığı gibi günümüzün tüm büyük tarayıcılarında desteklenmektedir: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

— Sunil
kaynak

8

CSS uzmanı değilim, ancak etkilenen öğelerin sayısını artırdığınız sürece tw16'nın yanıtını kullanabileceğinizi düşünüyorum. Örneğin, bu, diğer herhangi bir etkileşim türünü etkilemeden sayfamın her yerinde vurgulanmayı engeller:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

Bu ilk satır, Paul Irish'in izniyle ( http://adamschwartz.co/magic-of-css/chapters/1-the-box/ aracılığıyla ).

— SterlingVix
kaynak

İOS 13'te bir PWA'nız varken bu CSS'yi asla kullanmayın, bu klavyeyi tamamen engeller.

— Fer

2

Tüm div öğelerini hedefleyin:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

Tüm öğeleri hedefleyin:

::-moz-selection { background:transparent; }
::selection { background:transparent; }

— Jasonleonhard
kaynak

1

kullanıcı seçimini devre dışı bırakın:

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

seçili öğe için arka planı şeffaf ayarla:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }

— Jin.
kaynak

3

Bu kod parçacığı soruyu çözebilirken, bir açıklama eklemek, yayınınızın kalitesini artırmaya gerçekten yardımcı olur. Gelecekte okuyucular için soruyu yanıtlayacağınızı ve bu kişilerin kod önerinizin nedenlerini bilmeyebileceklerini unutmayın.

— msrd0

0

Bir öğe tıklanabilirse, onu bir düğme öğesi yapmak isteyebilirsiniz.

— Medda86
kaynak