js给某个text标签添加鼠标的双击事件

js 的单双击事件同时存在会有一个问题：双击事件会同时触发单击事件，两个事件存在冲突。

我们加一个延迟时间就能很好的解决这个问题。

原理： 当接收到第一个点击时，我们先把单击事件存储在这个是全局变量 click_store 里，如果 0.3 秒内没有接收到双击事件，就去执行它，如果接收到了，我们把它清理掉，然后去执行双击事件。setTimeout() 可以实现延迟执行。

随着互联网的发展，各种网站技术以及网站的呈现技术层出不穷，网站的页面展现已经从之前的页面间跳转到现在大行其道的单页面应用，页面内容的切换不再需要进行页面的跳转了，使用起来更加舒适。

功能在变化，技术在变迁，页面展现的技术已经跟上了，作为产品经理的输出产品-原型，怎么能不是对单页面进行实现呢？

其实，要实现单页面应用的效果，在原型设计软件Axure中来说，最主要使用到的是动态面板以及鼠标的一些点击或者悬停事件。下面将详细介绍如何制作一个单页面应用原型

首先，先新建一个rp文件

新建完后会生成多个默认的页面

因为我们是进行单页面应用的设计，所以只会使用到其中的一个页面，所以只需保留index页面就够用了，删除其他多余页面。

首先在页面区域内添加一个矩形框，作为应用的最大 *** 作区域，并命名 *** 作区域。

添加页面头部矩形框，在头部矩形框中添加三个H2文字，代表三个不同页面入口，在头部栏下方添加一个动态面板，使两个组件将 *** 作区域完全填充，动态面板用于实现单页面效果

双击动态面板，d出动态面板的状态管理框，分别添加首页、资讯、我的三个面板状态

在面板状态管理中点击编辑所有状态即可打开所有状态页面的编辑页

在各个状态的编辑页中加入各自的内容

三个页面都已经有了内容了，现在需要做的是页面内容的切换。定位到index页面，选中首页，选择属性，添加鼠标点击时的事件，选择鼠标点击时设置动态面板状态，然后选中面板状态，再选择面板状态。对于资讯、我的按钮也同样 *** 作。

经过一番 *** 作，已经可以通过点击按钮选择展现去的内容显示了，点击首页将会显示首页内容，点击资讯将会显示资讯也内容，点击我的将会显示我的页面内容。

为了添加选中效果，给头部的菜单栏添加鼠标的悬停事件，当鼠标悬停到对应的菜单是，菜单的背景颜色将会变化。 *** 作如图，先选中菜单，找到属性中的交互样式设置，点击鼠标悬停，在d出窗口中找到填充颜色，选择一个自己喜欢的颜色，点击去确定即可。资讯、我的两个菜单也如此 *** 作即可成。

效果预览，点击预览将会在浏览器中展现页面效果，可以进行相应的点击 *** 作来切换内容展现，实现单页面显示效果。

至此，动态面板配合简单的鼠标事件就已经将单页面应用的简单效果完成了。赶紧去试一下吧。

ireport添加不了鼠标事件哦，如果你要做报表的话，不妨尝试一下FineReport来实现一些鼠标的功能，比如鼠标滑过下拉框选项时在单元格中显示对应的图片：

1、新建一张模版，如下图所示设计模版

2、下拉框的控件名为ceshi，数据字典选择自定义，如下图

要注意下拉框控件名称，在下面的js代码里面使用了控件名称调用该控件。

3、图片单元格

B2单元格为显示图片的单元格，单元格值为<img id ="simon_img"src='http://localhost:8075/webreport/page_demo/翠鸟.png">，是一个html显示图片的标签，故该单元格的内容显示方式需要选择为用HTML显示内容，选中单元格，在右侧的单元格属性表中选择单元格属性表—其他属性>显示内容，下拉框选择用HTML显示内容，单元格中图片默认显示翠鸟

要助于img标签的id，要与下面的代码里面使用的id一致。

然后进行加载结束事件，最好进行图片准备

要注意的是图片名称需要与下拉框的显示值保持一致。

---