Firefox перетаскивает отделение как он, было изображение
Я использую этот HTML, код CSS и код JavaScript (в одном документе вместе, если Вы хотите проверить его):
<style type="text/css">
#slider_container {
width: 200px;
height: 30px;
background-color: red;
display:block;
}
#slider {
width: 20px;
height: 30px;
background-color: blue;
display:block;
position:absolute;
left:0;
}
</style>
<script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").mousedown(function() {
$(document).mousemove(function(evnt) {
$("#test").html("sliding");
}).mouseup(function() {
$("#test").html("not sliding");
$(document).unbind("mousemove mouseup");
});});
});
</script>
<div id="test">a</div>
<div id="slider_container">
<div id="slider"></div>
</div>
Все (удивительно) хорошо работает в IE, но Firefox кажется полностью clusterf*ck, когда этот JavaScript используется. Первый "слайд" хорошо, Вы перетаскиваете, он говорит "скольжение", Вы отбрасываете, он говорит "не скольжение". На втором "слайде" (или mousedown, если Вы будете), Firefox внезапно думает, что отделение является изображением или ссылкой и хочет перетащить ее вокруг.
Снимок экрана перетаскивания:
Очевидно, синее отделение, полурасположенное в красное отделение, является перетаскиваемым тем. Windows не получает курсор, когда Вы делаете снимок экрана, но это - знак Стоп.
Разве там должен некоторым образом предотвратить это поведение по умолчанию?
2 ответа
Вам необходимо вернуть false из обработчиков событий, чтобы предотвратить действие по умолчанию (выделение текста, перетаскивание выделения и т. Д.). Основываясь на коде, опубликованном Crispy, вот мое решение:
$(function() {
var sliderMouseDown = false;
$("#slider").mousedown(function() {
sliderMouseDown = true;
return false;
});
$(document).mousemove(function(evnt) {
if (sliderMouseDown) {
$("#test").html("sliding");
return false;
}
});
$(document).mouseup(function() {
if (sliderMouseDown){
$("#test").html("not sliding");
sliderMouseDown = false;
return false;
}
});
});
Отличная ошибка, после того, как с ней повозились, похоже, что Firefox запоминает событие mousedown на ползунке и обрабатывает его так, как если бы пользователь начал выделять какой-то текст (отсюда и «знак остановки», который вы видели). Таким образом, Firefox обрабатывает следующее событие mousedown, как если бы пользователь куда-то перетаскивал текст. Возможно, есть более подходящее решение, но простое добавление
$ ("# slider"). Focus ()
сделает свое дело, поскольку тогда Firefox "сбросит" курсор, чтобы он не подумал, что пользователь перетаскивает текст.
Я также хотел бы прокомментировать, что вы постоянно связываете и отключаете события (что, похоже, не очень хорошо сочетается с выполнением ie7 нескольких операций перетаскивания). Я бы предложил что-то вроде следующего, что однажды связывает делегатов.
$(function() {
var sliderMouseDown = false;
$("#slider").mousedown(function() {
sliderMouseDown = true;
});
$(document).mousemove(function(evnt) {
if (sliderMouseDown) {
$("#test").html("sliding");
}
});
$(document).mouseup(function() {
if (sliderMouseDown)
{
$("#test").html("not sliding");
$("#slider").focus(); //<-- fix the FF issue to reset cursor
sliderMouseDown = false;
}
});
});