Javascript在IE中工作，但在Firefox中没有 [英] Javascript working in IE, but not in Firefox
本文介绍了Javascript在IE中工作，但在Firefox中没有的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨！我正在尝试使用js和html4，制作一个可拖动的div和一个可点击的div。该脚本在Internet Explorer中运行良好，但在Mozilla Firefox中没有任何反应。任何人都可以帮忙吗？
Hi! I'm experimenting with js and html4, making a draggable div and a clickable one. The script works fine in Internet Explorer but in Mozilla Firefox nothing happens. Can anyone help?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var oldX;
var oldY;
var newX;
var newY;
var x;
var y;
var offsetX;
var offsetY;
var pressed;
var rsz=0;
var rszmv=0;
pressed = 0;
function press(event){
document.body.focus();
var target = event.target != null ? event.target : event.srcElement;
if(target.id == 'wndtop'){
rsz=0;
rszmv=0;
document.getElementById('wndtop').style.backgroundColor='grey';
document.getElementById('wndtop').style.cursor='move';
pressed = 1;
x = parseInt(document.getElementById('wnd').style.left);
y = parseInt(document.getElementById('wnd').style.top);
offsetX = event.screenX - x;
offsetY = event.screenY - y;
}
else if(target.id == 'wnd'){
rszmv=rsz;
}
oldX = event.screenX;
oldY = event.screenY;
return false;
}
function release(event){
var target = event.target != null ? event.target : event.srcElement;
pressed = 0;
rxz=0;
rszmv=0;
document.getElementById('wnd').style.cursor='default';
document.getElementById('wndtop').style.backgroundColor='green';
if(target.id == 'check'){
if(document.getElementById('check').style.backgroundColor == 'red') document.getElementById('check').style.backgroundColor = 'green';
else document.getElementById('check').style.backgroundColor = 'red';
}
document.getElementById('wnd').style.cursor='default';
document.getElementById('wndtop').style.cursor='default';
}
function move(event){
var target = event.target != null ? event.target : event.srcElement;
var x1 = parseInt(document.getElementById('wnd').style.left);
var y1 = parseInt(document.getElementById('wnd').style.top);
var w = parseInt(document.getElementById('wnd').style.width);
var h = parseInt(document.getElementById('wnd').style.height);
var w1 = parseInt(document.getElementById('wndin').style.width);
var h1 = parseInt(document.getElementById('wndin').style.height);
if(pressed == 0){
if(target.id == 'wnd'){
if(rszmv == 0){
if(event.screenX>x1+10 && event.screenX<x1+w-10){
if(event.screenY<y1+2){
rsz=2;
document.getElementById('wnd').style.cursor='n-resize';
}
else{
rsz=6;
document.getElementById('wnd').style.cursor='s-resize';
}
}
else if(event.screenY>y1+10 && event.screenY<y1+h-10){
if(event.screenX<x1+2){
rsz=8;
document.getElementById('wnd').style.cursor='w-resize';
}
else{
rsz=4;
document.getElementById('wnd').style.cursor='e-resize';
}
}
else if(event.screenX<=x1+10){
if(event.screenY<=y1+10){
rsz=1;
document.getElementById('wnd').style.cursor='nw-resize';
}
else{
rsz=7;
document.getElementById('wnd').style.cursor='sw-resize';
}
}
else{
if(event.screenY<=y1+10){
rsz=3;
document.getElementById('wnd').style.cursor='ne-resize';
}
else{
rsz=5;
document.getElementById('wnd').style.cursor='se-resize';
}
}
}
else{
switch(rszmv){
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
break;
case 5:
break;
case 6:
break;
case 7:
break;
case 8:
break;
default:
break;
}
}
}
else if(target.id != 'wndtop'){
document.getElementById('wnd').style.cursor='default';
document.getElementById('wndtop').style.cursor='default';
}
}
else{
newX=event.screenX;
newY=event.screenY;
document.getElementById('wnd').style.left = newX - offsetX + 'px';
document.getElementById('wnd').style.top = newY - offsetY + 'px';
if(parseInt((document.getElementById('wnd').style.top))<20) {
(document.getElementById('wnd').style.top)='20px';
newY = 20 + offsetY;
}
oldX = newX;
oldY = newY;
}
}
</script>
</head>
<body onmousedown="press(event);" onmousemove="move(event);" onmouseup="release(event);">
<div id="wnd" style="position:relative;background-color:red;top:30px;left:10px;width:200px;height:150px;">
<div id="wndtop" style="position:absolute;background-color:green;left:2px;top:2px;width:196px;height:20px;"></div>
<div id="wndin" style="position:absolute;background-color:white;left:2px;top:22px;width:196px;height:126px;">
Try to drag this window?
</div>
</div>
<div id="check" style="position:absolute;top:5px;left:5px;width:10px;height:10px;background-color:green;">
</div>
</body>
</html>
PS rsz和rszmv将用于调整wnddiv的大小，但我还没有实现这个功能。
E_D_I_T_ !! ！我做了一些改变。现在它有点适用于Firefox和Chrome但是如果我移动鼠标太快并且它离开了div的轮廓，div会停止移动直到我把鼠标放回它上面：/它仍然适用于IE。
P.S. rsz and rszmv will be used for resizing the "wnd" div but I haven't implemented this functionallity yet.
E_D_I_T_!!! I made some changes. Now it kinda works in Firefox and Chrome but if I move the mouse too fast and it leaves the div's contours, the div stops moveing untill I put the mouse back on it :/ It still works great with IE though.
推荐答案
您正在使用未在Firefox或Chrome上运行的event.clientX和event.clientY。
如果您想获得鼠标位置，请参阅此链接：
http://www.quirksmode.org/js/events_properties .html＃position [ ^ ]
You are using event.clientX and event.clientY which aren't running on Firefox or Chrome.
If you want to get the mouse'position, refer to this link:
http://www.quirksmode.org/js/events_properties.html#position[^]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js">
</script>
<script type="text/javascript">
function press(event){
var target = event.target != null ? event.target : event.srcElement;
if(target.id == 'tBar'){
document.getElementById('tBar').style.backgroundColor = 'red';
document.getElementById('tBar').style.color = 'yellow';
document.getElementById('tBar').style.cursor = 'move';
}
}
function release(event){
document.getElementById('tBar').style.backgroundColor = 'yellow';
document.getElementById('tBar').style.color = 'red';
document.getElementById('tBar').style.cursor = 'default';
}
function over(event){
var target = event.target != null ? event.target : event.srcElement;
if(target.id == 'tBar'){
（ #wnd）。draggable（{disabled： false }）;
}
其他 {
("#wnd").draggable({disabled: false}); } else{
这篇关于Javascript在IE中工作，但在Firefox中没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
