Я хочу создать какой-то «рисунок» внутри обычного div (без холста!).Я использую событие onmousemove, чтобы отследить положение мыши.Следующий код демонстрирует мою текущую ситуацию:
Правила CSS:
#outer { width: 400px; border: 1px solid #000000; }
#inner { width: 100%; height: 20px; background: green; }
Фактическая часть JavaScript / HTML:
</p>
<pre><code> var is_drawing = false;
function startdraw() {
is_drawing = true;
var div = document.getElementById("inner");
div.setAttribute("style", "cursor: crosshair");
}
function stopdraw() {
is_drawing = false;
var div = document.getElementById("inner");
div.setAttribute("style", "cursor: auto");
}
function dodraw(e) {
if (!e) {
e = window.event;
} else if (!is_drawing) {
return;
}
// Some more code to be added later
var deb = document.getElementById("deb");
deb.innerHTML = "coords -- x(" + String(e.clientX) + ") y(" + String(e.clientY) + ")";
}
</script>
<div id="outer">
<div id="inner" onmousedown="startdraw()" onmouseup="stopdraw()" onmousemove="dodraw(event)"></div>
</div>
Что ожидается и фактический результат?
При нажатии на внутренний div и перемещении мыши, удерживая кнопку мыши, курсор должен постоянно находиться«крестик».Это также прекрасно работает с IE9 (RC), и частично с Firefox 3.6 - в Firefox, это работает только при загрузке сайта и первом клике во внутренний div.При отпускании кнопки и повторном щелчке и перемещении отображается курсор «не разрешено», а атрибут курсора CSS не действует вообще.В Google Chrome курсор даже не меняется (при этом постоянно присутствует курсор ввода).
Какой выбор у меня есть?Любой совет приветствуется.