发布于 2017-03-20 18:34:42 | 25 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


下面小编就为大家带来一篇原生态js,鼠标按下后,经过了那些单元格的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格

之所以发出来,是觉得案例还有很多有意思的地方

onmouseover  的持续触发,导致了很多重复元素

由于将事件绑定在整个table上,还出现了undefined

鼠标的反复进入进出,会导致相同元素的断断续续的重复,

如何解决他们!


<table border="1" id="dnf"> 
  <tr> 
     
     
    <td rowspan="2">2</td> 
    <td>2</td> 
    <td>4</td> 
  </tr> 
  <tr> 
     
     
    <td>2</td> 
    <td>4</td> 
  </tr> 
</table> 

window.onload = function() 
{ 
  var flag = false;<BR>     //当鼠标被按下时,为true,放开是为true 
  var indexs =[];<BR>      //用来存放鼠标经过的单元格在整个表格的位置,鼠标按下时被初始化, 
  dnf.onmousedown = function() 
  { 
    flag = true; 
    indexs = []; 
  } 
  dnf.onmousemove = function(e) 
  { 
    if(flag)//只有鼠标被按下时,才会执行复合代码 
    { 
      indexs.push(search(e.target,dnf.getElementsByTagName("td")))   
    } 
  } 
  dnf.onmouseup = function() 
  { 
    flag = false; 
    deleteUndefined();//由于会经过边框,所以会出现null元素 
    deleteRepaint();//由于onmouseover不会只触发一次,且我们选择是可能反复经过一个单元格 
    alert(indexs); 
  } 
  function deleteRepaint() 
  { 
    for(var j=0;j<indexs.length;j++)//保证第j个元素是唯一的 
    { 
      var head = indexs[j]; 
      for(var i=j+1;i<indexs.length;i++)//删除与第j个重复的 
      { 
        if(head == indexs[i]) 
        { 
          indexs.splice(i,1); 
          i--; 
        } 
      } 
    } 
  } 
  function deleteUndefined() 
  { 
     
    for(var i=0;i<indexs.length;i++) 
    { 
      if(typeof indexs[i] == "undefined") 
      { 
        indexs.splice(i,1); 
        i--; 
      } 
    } 
     
  } 
  function search(a,A) 
  { 
    var length = A.length; 
     
    for(var i=0;i<length;i++) 
    { 
       
      if(a == A[i]) 
      { 
       
        return i; 
      } 
       
    } 
  } 
} 
</script>

以上这篇原生态js,鼠标按下后,经过了那些单元格的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phperz。



相关阅读 :
原生态js,鼠标按下后,经过了那些单元格的简单实例
JS取数字小数点后两位或n位的简单方法
js实现千分符和保留几位小数的简单实例
JS实现点击按钮自动增加一个单元格的方法
js实现目录链接,内容跟着目录滚动显示的简单实例
JS判断form内所有表单是否为空的简单实例
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
鼠标滑上去后图片放大浮出效果的js代码
js同时按下两个方向键
IE下JS保存图片的简单实例
js鼠标单击和双击事件冲突问题的快速解决方法
JS获取文本框,下拉框,单选框的值的简单实例
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务