项目中需要用到弹出层,显示蛋白质序列的详细信息:
鼠标在链接上面,弹出另外一个层,层内显示详细,鼠标离开时,弹出层消失。
问题看似简单,做起来问题渐显。
再次真正理解js中event事件。
下面文章讲的让人拍案叫绝,拿出来分享分享
http://www.quirksmode.org/js/events_mouse.html
Mousing out of a layer
--------------
| Layer |.onmouseout = doSomething;
| -------- |
| | Link | -------> We want to know about this mouseout
| | | |
| -------- |
| -------- |
| | Link | |
| | ----> | but not about this one
| -------- |
--------------
---->: mouse movement
function doSomething(e) {
if (!e) var e = window.event;
var tg = (e.srcElement) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}
在应用时,注意while循环中条件的判定!视不同的情况
文章解释
Explanation
First get the event target, ie. the element the mouse moved out of. If the target is not the DIV (layer), end the function immediately, since the mouse has certainly not left the layer.
If the target is the layer, we're still not sure if the mouse left the layer or entered a link within the layer. Therefore we're going to check the relatedTarget/toElement of the event, ie. the element the mouse moved to.
We read out this element, and then we're going to move upwards through the DOM tree until we either encounter the target of the event (ie. the DIV), or the body element.
If we encounter the target the mouse moves towards a child element of the layer, so the mouse has not actually left the layer. We stop the function.
When the function has survived all these checks we're certain that the mouse has actually left the layer and we can take appropriate action (usually making the layer invisible).
fromElement toElement relatedTarget target srcElement
Mouseover
function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.fromElement;
}
Mouseout
function doSomething(e) {
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}
Mousemove
element.onmousemove = doSomething;
// later
element.onmousemove = null;
Expanation
Therefore it’s best to register an onmousemove event handler only when you need it and to remove it as soon as it’s not needed any more:
the article is perfect ! thx
分享到:
相关推荐
NULL 博文链接:https://andycbluo.iteye.com/blog/2269582
- JavaScript Events And Responding To The User - JavaScript Profiling With The Chrome Developer Tools - Writing Fast, Memory-Efficient JavaScript - Designing Better JavaScript APIs
Javascript事件Javascript事件
JavaScript events: giving the iRock a voice 18 Alerting the user with a function 19 Add the iRock greeting 20 Now let’s make the iRock really interactive 22 Interaction is TWO-way communication 23 ...
实验性扩展,可通过浏览器中JavaScript识别,分析和阻止代码执行和事件收集。 我们拥有惊人的项目,例如Lightbeam,NoScript,ScriptSafe,uBlock Origin,HTTPS Everywhere等。 所有人都有识别和/或防止执行可疑...
通过浏览器中的JavaScript识别,分析和阻止代码执行和事件收集的实验性扩展。 我们有像Lightbeam,NoScript,ScriptSafe,uBlock Origin,HTTPS Everywhere等等令人惊叹的项目。所有人都有建议来确定和/或防止执行有...
Upload status updates are made through a set of simple JavaScript events. The developer uses these events to update the webpage as the file upload progresses. Unfortunately Flash Player 10 has ...
dhtmlxScheduler is a web-based JavaScript events calendar that provides a rich and intuitive scheduling solution similar to MS Outlook Calendar, Apple's iCal, or Google Calendar. The events can be ...
sgcWebSockets is a complete package providing access to WebSockets protocol, allowing to ...javascript Events for a full control Async Events using Ajax SSL/TLS support on Server and Client components
3 Javascript Events: Reacting to your users 93 4 Multiple Event Handlers: Two’s Company 139 5 Asynchronous Applications: It’s Like Renewing Your Driver’s License 173 6 The Document Object Model: ...
Advanced support for scripting client side JavaScript events. Library core is fully optimized to achieve highest level of scalability. Including advanced Stress Test Tool utility. Comes with various ...
New Event description tab in IWScriptEvents editor with some valuable information about JavaScript events Modification in TIWBaseForm: ExecuteForm() and GenerateForm() methods were made static (non ...
Bootstrap JavaScript events 177 Awesome Bootstrap modals 177 Modal general and content 179 The modal header 179 The modal body 180 The modal footer 180 Creating our custom modal 181 A tool for your ...
What Is JavaScript Events
Tips for handling touch interactions and capturing JavaScript events Specific CSS styles that are useful for developing applications Techniques for integrating applications with core iPhone services ...
- JavaScript events and properties for integration in your website Free Silverlight Multi File Uploader 配置参数说明: MaxFileSizeKB: File size in KBs.(最大上传尺寸,以KB为单位) MaxUploads: Maximum...
Chapter 17 Handling Events Chapter 18 Scripted HTTP Chapter 19 The jQuery Library Chapter 20 Client-Side Storage Chapter 21 Scripted Media and Graphics Chapter 22 HTML5 APIs Core JavaScript Reference...
and how the DOM redefined how events should workenhancing form interactions and working around browser limitationsusing the tag to create on-the-fly graphicsJavaScript API changes in ...
The first module Mastering JavaScript, stress on practical aspects of Javascript development like—Functions and Closures, Runtime debugging techniques, project layout, events and DOM processing, ...