Я сделал пейджинговый контроль, и я заметил, что при нажатии на кнопки очень легко случайно выбрать отдельные изображения и текст. Можно ли предотвратить это?
Чтобы уточнить выбор, я имею в виду выделение с помощью мыши. (Попробуйте перетащить мышью с одной стороны экрана на другую.)
Если вы попытаетесь выделить текст/элементы управления в этой сетке, он не может быть выбран. Как это делается? Ссылка
перетаскивание и выбор и инициализации в событии мыши и обновление при последующих перемещениях мыши. Когда вы обрабатываете события, чтобы начать перетаскивание или следовать за мышью, отмените всплеск событий и переопределите возврат по умолчанию браузера:
что-то вроде этого в вашем начале перетаскивания мыши и перемещения обработчиков -
e=e || window.event; pauseEvent(e);
function pauseEvent(e){
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble=true;
e.returnValue=false;
return false;
}
Для перетаскивания вы захватываете события mousedown и mousemove. (И, надеюсь, touchstart и touchmove события, чтобы поддерживать сенсорные интерфейсы.)
Вам нужно вызвать event.preventDefault() в событиях down и move, чтобы браузер не мог выбирать текст.
Например (с помощью jQuery):
var mouseDown = false;
$(element).on('mousedown touchstart', function(event) {
event.preventDefault();
mouseDown = true;
});
$(element).on('mousemove touchmove', function(event) {
event.preventDefault();
if(mouseDown) {
// Do something here.
}
});
$(window.document).on('mouseup touchend', function(event) {
// Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element.
mouseDown = false;
});
Я хотел прокомментировать, но у меня недостаточно репутации. Используя предложенную функцию от @kennebec, я решил проблему в моей библиотеке перетаскивания javascript. Это работает безупречно.
function pauseEvent(e){
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble=true;
e.returnValue=false;
return false;
}
Я назвал его в моей mousedown и mousemove пользовательской функции, сразу после того, как я узнал, что я нажал на правый элемент. Если я назову его просто поверх функции, я просто удалю любой щелчок по документу. Моя функция зарегистрирована как событие на document.body.
Это может быть достигнуто с помощью CSS в большинстве браузеров и unselectable expando в IE. См. Мой ответ здесь: Как отключить выделение выделения текста с помощью CSS?
попробуйте следующее:
document.onselectstart = function()
{
window.getSelection().removeAllRanges();
};
просто запретите его, вызвав функцию blur(), когда выбрано следующее:
<input Value="test" onSelect="blur();">
Если вам нужно заблокировать выделение текста для определенного элемента с помощью JavaScript, то самым простым методом для меня было присвоение стиля userSelect следующим образом:
var myElement = document.createElement('div');
myElement.style.userSelect = 'none';