У мене є div на HTML-сторінці, і кожен раз, коли я натискаю на мишку та рухаю її, він показуватиме, що курсор "не може впустити", якби він щось вибрав. Чи є спосіб відключити вибір? Я спробував CSS user-select без жодного успіху.
Відповіді:
Запатентовані варіанти user-select
будуть працювати в більшості сучасних браузерів:
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
Для IE <10 та Opera вам потрібно буде використовувати unselectable
атрибут елемента, який ви хочете неможливо вибрати. Ви можете встановити це за допомогою атрибута в HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
На жаль, ця властивість не успадковується, тобто ви повинні помістити атрибут у початковий тег кожного елемента всередині <div>
. Якщо це проблема, ви можете замість цього використовувати JavaScript, щоб зробити це рекурсивно для нащадків елемента:
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
-moz-none
це шлях. Я зміню свою відповідь.
-moz-none
здається, автозавершення Firebug не завершено, хоча none
: -moz-user-select: none
(працює)
user-select
стосується лише тексту та жодних інших елементів
Здається, вибір користувачем CSS не запобігає перетягуванню зображення ... так ..
HTML:
<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla
CSS:
* {
user-select: none;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: -moz-none;
-webkit-user-select: none;
}
::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }
JS:
$(function(){
$('*:[unselectable=on]').mousedown(function(event) {
event.preventDefault();
return false;
});
});
Я використовую cancelBubble=true
і stopPropagation()
в миші вниз, і переміщую обробники.
event.preventDefault()
схоже, робить фокус (протестовано в IE7-9 та Chrome):
jQuery('#slider').on('mousedown', function (e) {
var handler, doc = jQuery(document);
e.preventDefault();
doc.on('mousemove', handler = function (e) {
e.preventDefault();
// refresh your screen here
});
doc.one('mouseup', function (e) {
doc.off('mousemove', handler);
});
});
У вас є якесь прозоре зображення, яке ви вибрали? Зазвичай під час перетягування зображення з'являється піктограма "неможливо". В іншому випадку він зазвичай виділяє текст під час перетягування. Якщо так, можливо, доведеться поставити зображення за всім за допомогою z-index.