第一版

鼠标经过的时候弹出提示,0.5秒之后自动关闭。(鼠标经过弹出,鼠标移开关闭,在HTML中密集排列A标签的时候,会因鼠标移动而闪烁,完全看不清提示。所以必须有时效否则关闭不了。)

function mopen()
{
    document.getElementById('traincontent').style.display = 'block';        
            
}

function mclose()
{
    document.getElementById('traincontent').style.display = 'none';
}

function mclosetime()
{
    closetimer = window.setTimeout(mclose, 500);
}

HTML:

<a οnmοuseοut="mclosetime()" οnmοuseοver="mopen()"></a>

第二版(IE8 BUG版)

上边要求说,不要鼠标经过的时候弹出提示,应该鼠标点击上去再弹出提示,并且,鼠标再次点击的时候,要关闭提示。

于是我将第一版做了一些修改,想到了把onmouseout 和 onmouseover 改成 onmouseup 和 onmousedown,并且在javascript 中操纵onclick事件。

不过,由于我一时糊涂,代码冗余,导致了IE8的错乱。。。鼠标点击A标签的时候,提示内容会闪烁,而不是维持着。火狐没有问题(感谢包容。。。)

function mopen()
{
    document.getElementById('traincontent').style.display = 'block';        
            document.onclick = mclose;
}

function mclose()
{
    document.getElementById('traincontent').style.display = 'none';
}

function mclosetime()
{
    document.onclick = mopen;
}

HTML:

<a οnmοuseup="mclosetime()" οnmοusedοwn="mopen()"></a>

为了排除IE8的问题,我一度梦想JS代码本身很好,是HTML在IE8中的问题,想到了CLEARFIX或者HASLAYOUT,结果都没一毛钱关系。

最后还是只能对着自己写的JS挑毛病。

改写成JQUERY以后,问题还是存在。并不是由于我改得不伦不类。。(那句document.onclick = mopen;我竟然不会改写JQUERY。。。)

改写后:

function mopen()
{
    $('#traincontent').css('display','block');        
            document.onclick = mclose;
}

function mclose()
{
    $('#traincontent').css('display','none');
}

function mclosetime()
{
    document.onclick = mopen;
}

第三版

秉承平时调浏览器差异的瞎猫死老鼠乱撞原则,我扔掉了鸡肋的mclosetime函数(没有时间控制还留它干嘛):

function mopen()
{
    $('#traincontent').css('display','block');        
            document.onmousedown = mclose;
}

function mclose()
{
    $('#traincontent').css('display','none');
}

HTML:

<a οnmοuseup="mclose()" οnclick="mopen()"></a>

转载于:https://www.cnblogs.com/haimingpro/archive/2013/01/09/2852566.html

一个简单HTML鼠标事件问题的衍化历程相关推荐

  1. PYTHON鼠标记录器 一个简单的鼠标记录器 可以修改坐标和点击的时间

    PYTHON鼠标记录器 一个简单的鼠标记录器 可以修改坐标和点击的时间. 差一个定时器,如果加上定时器,估计就是解放了守在电脑边的你. 定时器版本忘了放在哪里了.先分享这个给对编程爱好的朋友,虽然我在 ...

  2. 用JS基础写一个简单的滚动条事件

    滚动条事件,顾名思义,就是创建一个可以一直下拉的滚动条. 用的场景多用于商品的推荐. 首先要在CSS里创建一个高度(相关的也可以) <style>body{padding-bottom: ...

  3. vue aplayer 进度条无法拖动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...

    演示事例 http://www.longstudy.club/vue-drag-scroll/index.html 最近在做一个新的项目,有个需求是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会 ...

  4. java 不让滚动条随着拖拽滑动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...

    演示事例 http://www.longstudy.club/vue-drag-scroll/index.html 最近在做一个新的项目,有个需求是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会 ...

  5. processing判断一个点(鼠标事件)是否在三角形、圆、椭圆、矩形内之第二章(超详细鼠标交互)

    第二篇更新啦!!!! 上一篇我们详细地讲了processing判断点击是否在三角形和圆内​​​​​​​,这一期我们主要讲如何判断点击在椭圆和矩形内部,喜欢就麻烦点赞加关注吧,谢谢噢,你的支持是我继续创 ...

  6. JQuery实现一个简单的鼠标跟随提示效果

    效果体验:http://hovertree.com/texiao/jsstudy/2/ 实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建 ...

  7. html 表格自动计算,一个简单的js事件,循环table并自动计算总价

    texter function $get(id){ return document.getElementById(id); } var table=null; function caculPrice( ...

  8. axure 鼠标样式,Axure8-动态面板+简单鼠标事件实现单页面应用

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

  9. 事件监听器 java_Java实现一个简单的事件监听器

    关于事件监听我们需要知道的一些基础知识. a)事件三要素(who when what): source --事件源 when--事件发生时间 message-- 事件主题消息,即希望通过事件传递出去的 ...

最新文章

  1. 给recycleview添加尾部
  2. 工业4.0的十大关键词
  3. Windows Server 2008 R2 负载平衡入门篇
  4. n个整数,其中有两个数是重复的,要求找出这两个重复的整数
  5. 吴恩达《机器学习》第十三章:聚类
  6. 如何快速演变XMind文件
  7. 蒙特卡洛算法_MCMC、蒙特卡洛近似和Metropolis算法简介
  8. 关于树形插件展示中数据结构转换的算法
  9. VB/VBA之死,何时休?
  10. 怎么创建css样式表,为HTML5表单创建CSS样式
  11. 小写和大写开头的英文名字  internet 和Internet在意思上有何重要区别?
  12. 排序算法二:二分(折半)插入排序
  13. 兴华永恒公司CSO仙果:Flash之殇—漏洞之王Flash Player的末路
  14. Task 4 用户输入->知识库的查询语句
  15. Magento数据库结构:EAV (转)
  16. 去掉搜狗拼音烦人的x+;进入搜狗搜索
  17. 信息安全数学基础(仅供个人复习使用)
  18. 中国IT工作者35岁后的发展出路调查报告(2)
  19. @Transactional 使用说明
  20. 两个顺序栈共享一个数组的存储空间

热门文章

  1. 路由器配置与管理完全手册(H3C篇)学习感想
  2. 2.1.2 数据通信基础知识
  3. 三星emcp型号详解_嵌入式存储产品发展趋势:uMCP取代eMCP序幕拉开
  4. 内核通信错误处理方法
  5. python 类的继承,类中的函数调用以及类输入数组
  6. 使用迁移学习不断的自我纠正神经网络
  7. python经典练习题
  8. 学习python的日常6
  9. trap信号捕捉命令介绍与shell结合实战讲解
  10. Hadoop YARN学习之Hadoop框架演进历史简述