I am trying to write some JavaScript that draws a line by dragging the mouse, and then removes it when you let go of left click.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
window.stop = false
window.canvas = document.getElementById("e");
window.context = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
window.pos = Shift();
}
function Shift() {
e = window.event
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop;
+ document.documentElement.scrollTop;
}
posx -= document.getElementById('e').offsetLeft;
posy -= document.getElementById('e').offsetTop;
return[posx,posy];
}
function up(){
document.getElementById('e').onmousemove = null;
canvas.width = canvas.width;
}
function mov(){
canvas.width = canvas.width;
window.pos = Shift();
context.moveTo(window.start[0],window.start[1]);
context.lineTo(pos[0],pos[1]);
context.stroke();
}
function down(){
window.start = Shift();
document.getElementById('e').onmousemove = "mov()";
}
</script>
</head>
<body>
<canvas id="e" onMouseDown="down()" onmousemove="" onMouseup="up()"></canvas>
</body>
</html>
This example does not work and throws no errors. If
document.getElementById('e').onmousemove = "mov()";
is mented out and onmousemove is set to
onmousemove="mov()"
then it works, but obviously a line can only be drawn once. Also neither of the examples worked in FireFox. Tested in Chrome.
I am trying to write some JavaScript that draws a line by dragging the mouse, and then removes it when you let go of left click.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
window.stop = false
window.canvas = document.getElementById("e");
window.context = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
window.pos = Shift();
}
function Shift() {
e = window.event
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop;
+ document.documentElement.scrollTop;
}
posx -= document.getElementById('e').offsetLeft;
posy -= document.getElementById('e').offsetTop;
return[posx,posy];
}
function up(){
document.getElementById('e').onmousemove = null;
canvas.width = canvas.width;
}
function mov(){
canvas.width = canvas.width;
window.pos = Shift();
context.moveTo(window.start[0],window.start[1]);
context.lineTo(pos[0],pos[1]);
context.stroke();
}
function down(){
window.start = Shift();
document.getElementById('e').onmousemove = "mov()";
}
</script>
</head>
<body>
<canvas id="e" onMouseDown="down()" onmousemove="" onMouseup="up()"></canvas>
</body>
</html>
This example does not work and throws no errors. If
document.getElementById('e').onmousemove = "mov()";
is mented out and onmousemove is set to
onmousemove="mov()"
then it works, but obviously a line can only be drawn once. Also neither of the examples worked in FireFox. Tested in Chrome.
Share Improve this question edited Jan 15, 2023 at 11:40 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Sep 16, 2011 at 2:03 Jack S.Jack S. 2,8036 gold badges27 silver badges28 bronze badges3 Answers
Reset to default 2Change this:
document.getElementById('e').onmousemove = "mov()";
To this:
document.getElementById('e').onmousemove = mov;
You want to assign .onmousemove to a function reference, not to a string. Note that there are no parentheses: if you assign ...onmousemove = mov() it will run the mov() function and assign onmousemove to the return from the function (undefined, with this particular function). Without the parentheses it assigns it to the function itself.
use
document.getElementById('e').addEventListener('mousemove', mov, false);
document.getElementById('e').removeEventListener('mousemove', mov);
Made some fixes, but it is crazy code :)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
window.stop = false
window.canvas = document.getElementById("e");
window.context = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
}
function Shift(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop;
+ document.documentElement.scrollTop;
}
posx -= document.getElementById('e').offsetLeft;
posy -= document.getElementById('e').offsetTop;
return[posx,posy];
}
function up(){
document.getElementById('e').removeEventListener('mousemove', mov);
canvas.width = canvas.width;
}
function mov(e){
canvas.width = canvas.width;
window.pos = Shift(e);
context.moveTo(window.start[0],window.start[1]);
context.lineTo(pos[0],pos[1]);
context.stroke();
}
function down(e){
window.start = Shift(e);
document.getElementById('e').addEventListener('mousemove', mov, false);
}
</script>
</head>
<body>
<canvas id="e" onMouseDown="down()" onmousemove="" onMouseup="up()"></canvas>
</body>
</html>
You're assigning the function incorrectly
http://jsfiddle/wmTYr/
<div id="meh">hi</div>
<script>
function go() {
alert();
}
document.getElementById("meh").onmouseover = go
</script>