`
Anddy
  • 浏览: 198048 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javascript Events

阅读更多

项目中需要用到弹出层,显示蛋白质序列的详细信息:

鼠标在链接上面,弹出另外一个层,层内显示详细,鼠标离开时,弹出层消失。

问题看似简单,做起来问题渐显。

再次真正理解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
分享到:
评论

相关推荐

    NativeJS随记 - 浅析JavaScript Events

    标题中的“NativeJS随记 - 浅析JavaScript Events”表明这篇博客主要讨论的是JavaScript中的事件处理机制。JavaScript事件是Web开发中的重要组成部分,它允许我们响应用户的交互或浏览器的内部变化。在这里,我们将...

    Understanding Advanced JavaScript

    - JavaScript Events And Responding To The User - JavaScript Profiling With The Chrome Developer Tools - Writing Fast, Memory-Efficient JavaScript - Designing Better JavaScript APIs

    JavascriptEvents:Javascript事件

    JavaScript事件是Web开发中至关重要的一个概念,它使得网页具有了交互性,让网页能够响应用户的操作或系统状态的变化。JavaScript事件驱动了用户界面的行为,比如点击按钮、填写表单、滚动页面等。理解JavaScript...

    [Head.First.JavaScript].Michael.Morrison...

    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 ...

    Luminous: JavaScript events blocker-crx插件

    实验性扩展,可通过浏览器中JavaScript识别,分析和阻止代码执行和事件收集。 我们拥有惊人的项目,例如Lightbeam,NoScript,ScriptSafe,uBlock Origin,HTTPS Everywhere等。 所有人都有识别和/或防止执行可疑...

    夜光:JavaScript事件拦截器「Luminous: JavaScript events blocker」-crx插件

    通过浏览器中的JavaScript识别,分析和阻止代码执行和事件收集的实验性扩展。 我们有像Lightbeam,NoScript,ScriptSafe,uBlock Origin,HTTPS Everywhere等等令人惊叹的项目。所有人都有建议来确定和/或防止执行有...

    SWFUpload jwplayer

    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_v30_120111.zip

    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 v2.3 for D7-DXE3 Full Source

    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

    防汛排班日历组件的基本使用

    在JavaScript和Vue.js框架下,这样的组件能够帮助用户直观地查看和管理排班信息,确保在关键时刻能够及时有效地响应。Vue-fullcalendar是一个优秀的日历插件,它在Vue项目中提供了强大的事件管理功能,适用于防汛...

    highcharts 参数说明

    Highcharts 是一款非常流行的用于创建交互式图表的 JavaScript 库。它提供了丰富的配置选项来满足各种数据可视化的需求。本文将详细解释 Highcharts 的一些关键参数及其用法。 #### Chart 配置项 - **renderTo**: ...

    FMSoft_uniGUI_Complete_Professional_1.0.0.1386_RC

    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 ...

    IntraWeb v14.0.23 Ultimate for RAD Studio XE-XE5 (x32+x64)

    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 ...

    fullcalendar日程组件

    FullCalendar是一款强大的JavaScript日程组件,它支持多种视图(如日视图、周视图、月视图等),并且与各种数据源(如JSON、Google Calendar等)无缝集成。在本篇中,我们将深入探讨如何在Vue.js框架中使用...

    Bootstrap 4 responsive web design

    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 ...

    fullCalendar 日历

    fullCalendar是一款功能强大的JavaScript日历插件,它允许用户在网页上创建互动式、美观的日历视图。这个插件支持多种视图,如日视图、周视图、月视图,以及基本的列表视图,能够方便地展示和管理事件。它以其高度的...

    WhatIsJavaScriptEvents.pdf 英文原版

    What Is JavaScript Events

    hightcharts_code

    Highcharts 是一个流行的JavaScript库,用于创建交互式图表和数据可视化。这个例子是关于Master-Detail图表,一种在高精度细节展示中常见的图表类型。Master-Detail图表通常用于大数据集,用户可以放大某个部分查看...

    [iPhone开发书籍大全].Professional.iPhone.and.iPod.Touch.Programming(Wrox.2008).pdf

    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 ...

    highcharts简单的饼图demo

    events: { click: function(event) { console.log('点击了部分:', this.series[0].data[event.point.index]); } } ``` 7. **响应式设计**:Highcharts支持响应式布局,可以根据屏幕尺寸自动调整图表大小。你可以...

Global site tag (gtag.js) - Google Analytics