在IE/Opera中,evgl.srcElement?evgl.srcElement:evgl.target
是window.event,而在Firefox中,是event
而事件的对象,在IE中是 window.event.srcElement,在Firefox中是event.target,而在Opera中则两者都支持。
我们还是用例子来说明。
//***********************************
<HTML>
<HEAD>
<TITLE> event的跨浏览器测试 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Firefox 中在写关于event的函数的时候,必须把event对象作为参数传递给函数,这样才能使用event对象
function doTestEvent( evt )
{
//如果是IE/Opera,我们就用 srcElement 来获取触发事件的对象
// 如果是Firefox,我们就用 target 来获取触发事件的对象
var src = evt.srcElement ? evt.srcElement : evt.target;
alert( src.value );
}
//-->
</script>
</head>
<body>
<form name="frmtest">
<input type="button" value="event 测试" onclick="doTestEvent(event);" name="bttest">
</form>
</body>
</html>
//***********************************
这里顺便说一下判断鼠标按键的问题。
在 IE 里面
左键是 window.event.button = 1
右键是 window.event.button = 2
中键是 window.event.button = 4
没有按键动作的时候 window.event.button = 0
在 Firefox 里面
左键是 event.button = 0
右键是 event.button = 2
中键是 event.button = 1
没有按键动作的时候 event.button = 0
在 Opera 7.23/7.54 里面
鼠标左键是 window.event.button = 1
没有按键动作的时候 window.event.button = 1
右键和中键无法获取
而在 Opera 7.60/8.0 里面
鼠标左键是 window.event.button = 0
没有按键动作的时候 window.event.button = 0
右键和中键无法获取
下面我们写一个能在 IE4.01+/Firefox 0.9+/Opera 7.23+ 环境中均能运行正常的小程序,功能是用鼠标拖动层。
//***********************************
<HTML>
<HEAD>
<TITLE> 可用鼠标拖动的层 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var moving = false;
var initX = 0;
var initY = 0;
//*******************
// 获取触发事件的对象
//*******************
function findSrc(evt)
{
return( evt.target ? evt.target : evt.srcElement );
}
function start(evt)
{
//按下鼠标左键才允许移动
//evt.button == 1 IE/Opera 7.23/7.54
//evt.button == 0 Firefox/Opera 7.6+
if ( evt.button == 1 || evt.button == 0)
{
moving = true;
initX = evt.offsetX ? evt.offsetX : evt.layerX;
initY = evt.offsetY ? evt.offsetY : evt.layerY;
findSrc( evt ).style.cursor = "move";
window.status = "开始(button=" + evt.button + ")";
} else {
stop( evt );
}
}
function stop( evt )
{
moving = false;
findSrc( evt ).style.cursor = "";
window.status = "结束(button=" + evt.button + ")";
}
function move(evt)
{
//按下鼠标左键才允许移动
//evt.button == 1 IE/Opera 7.23/7.54
//evt.button == 0 Firefox/Opera 7.6+
if (moving && ( evt.button == 1 || evt.button == 0 ))
{
var intx = document.body.scrollLeft + evt.clientX; //获取当前鼠标位置的X坐标
var inty = document.body.scrollTop + evt.clientY; //获取当前鼠标位置的Y坐标
var div = findSrc( evt );
div.style.top = inty - initY;
div.style.left = intx - initX;
window.status = "X=" + intx + " Y=" + inty + " button=" + evt.button;
} else {
window.status = "已停止(button=" + evt.button + ")";
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="mdiv"
style="position: absolute; width:300px; height: 200px; background-color: #FFFFE1;"
onmousedown="start( event );"
onmouseup="stop( event );"
onmouseout="stop( event );"
onmousemove="move( event );"></div> </BODY> HTML>
分享到:
相关推荐
火狐浏览器不支持window.event的解决办法,解决不同浏览器针对window.event的差异
除了上述属性,`window.event`对象还包含其他属性,如`shiftKey`(检查Shift键状态)、`srcElement`(触发事件的元素,IE中等同于`target`)和`type`(事件类型),以及一些与鼠标和键盘交互相关的属性,如`offsetX`...
在JavaScript编程语言中,`window.event`对象是一个特殊对象,它与...尽管现代浏览器推荐使用`addEventListener`和事件处理函数参数来代替全局`window.event`,但在处理兼容性问题时,理解`window.event`仍然是必要的。
### Window.event.keycode值大全详解 #### 概述 在JavaScript中,`window.event.keycode`属性被用于获取用户按下键的键盘码。这在处理键盘事件时非常有用,可以帮助开发者识别并响应特定的按键操作。本文将详细...
例如,在Internet Explorer(IE)浏览器中,可以直接通过`window.event`来获取当前触发事件的信息;而在其他非IE浏览器(如Firefox)中,则需要通过其他方式来获取事件对象。这导致了在编写跨浏览器兼容性良好的代码...
### 高手window.event对象详解 #### 一、概述 `window.event` 是一个非常重要的JavaScript内置对象,它...虽然现代浏览器已经广泛支持了更先进的事件处理机制,但在某些情况下了解和使用`window.event`仍然非常重要。
通过合理的事件监听和通信机制,我们可以在弹出窗口中执行操作并获取返回值,增强了Web应用的交互性和用户体验。在实际开发中,根据具体需求,可以选择合适的通信策略来实现弹窗与原窗口的双向数据交换。
我们可以使用 onunload 事件和 event.clientX、event.clientY 属性或 window.event.screenX、window.event.clientY 属性来判断浏览器是刷新还是关闭窗口,这样我们可以执行相应的操作,提高用户体验。 在实际应用中...
event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象。比如你设定[removed] = myfunc;这时所有页面点击的事件都交给myfunc处理,在myfunc函数里可以写vSrc = window.event.srcElement,知道
window.addEventListener("message", function(event) { if (event.origin !== "http://yourdomain.com") return; // 检查来源 console.log("Received data:", event.data); }, false); ``` 4. **利用存储API*...
本文将详细讲解在IE浏览器中如何阻止右键点击的默认行为以及`event.preventDefault()`和`event.returnValue`的区别。 `event.preventDefault()`是W3C标准中的一个事件处理方法,它的主要作用是阻止一个事件的默认...
window.event对象是JavaScript中一个特殊的对象,它代表当前发生的事件的状态,包括触发事件的元素、鼠标位置和按键状态等信息。window.event对象仅在事件处理函数运行期间有效,因此它是事件处理函数的局部变量。每...
在JavaScript编程中,特别是在处理事件时...它能够在各种浏览器环境下提供事件对象,使得开发者可以一致地处理事件和访问事件目标元素。在实际开发中,这样的兼容性函数对于创建健壮、跨平台的JavaScript代码至关重要。
总结来说,JavaScript的事件源处理涉及到浏览器兼容性问题,开发者需要理解`window.event.srcElement`(IE特有)和`event.target`(W3C标准)的区别,并使用适当的兼容性解决方案来确保代码在不同浏览器下都能正常...
在JavaScript的世界里,`window.open`、`iframe`和`dialog`是三个非常重要的概念,它们在网页交互和页面通信中扮演着关键角色。这里我们将深入探讨这些知识点,并结合实例来帮助你理解它们的用法。 1. `window.open...
`window.showModalDialog` 和 `window.showModelessDialog` 提供了灵活的方式来创建弹出对话框,适用于需要与用户进行交互的应用场景。需要注意的是,这两个函数仅在 IE 浏览器中可用,并且由于现代浏览器的限制,...
在现代网页开发中,JavaScript 是一种在浏览器端广泛使用的脚本...在实践中,理解并熟悉window.event.keyCode以及其他相关的事件对象属性(如event.key、event.code等)将帮助开发者更好地控制和响应用户的键盘操作。
input type=”text” onkeydown=”keyNumAll... evt : ((window.event) ? window.event : “”); var key = evt.keyCode?evt.keyCode:evt.which;//兼容IE和Firefox获得keyBoardEvent对象的键值 console.info(key);/