原生态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,鼠标按下后,经过了那些单元格的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

  • 原生js实现跨浏览器获取鼠标按键的值

    复制代码 代码如下: document.onmousedown = function( e ){ alert(getButton(e)) // e.button W3C是获取鼠标按键 0 表示左键 1表示中键 2表示右键 而IE浏览器则是 1表示左键 4表示中间 2表示右键 这里的IE浏览器主要是IE8以下的浏览器 }; function getButton(e){ /* 1.window.event这个属性IE和Chrome都是支持的 2.但是Chrome也是支持W3C的 3.所以,如果说W3

  • 原生态js,鼠标按下后,经过了那些单元格的简单实例

    本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover  的持续触发,导致了很多重复元素 由于将事件绑定在整个table上,还出现了undefined 鼠标的反复进入进出,会导致相同元素的断断续续的重复, 如何解决他们! <table border="1" id="dnf"> <tr> <td rowspan="2"&g

  • js 声明数组和向数组中添加对象变量的简单实例

    数组有四种定义的方式 使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", "second", "third"); 或者数组直接量: var d = ["first", "second", "third"]; 扩展: function ObjStory(id,biaoti,author

  • JS实现点击按钮自动增加一个单元格的方法

    本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个单元格 复制代码 代码如下: <HTML> <HEAD> <TITLE>js动态生成表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-

  • js中获取 table节点各tr及td的内容简单实例

    <table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td>

  • js实现千分符和保留几位小数的简单实例

    js实现千分符转化 function fmoney(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''; var l = s.split('.') [0].split('').reverse(), r = s.split('.') [1]; var t = ''; for (var i = 0; i < l.lengt

  • JS判断form内所有表单是否为空的简单实例

    如下所示: function checkForm(){ var input_cart=document.getElementsByTagName_r("INPUT"); for(var i=0; i<input_cart.length; i++) { if(input_cart[i].value==""||input_cart[i].value==null) { alert("信息不能为空!"); input_cart[i].focus()

  • JS使用for循环遍历Table的所有单元格内容

    JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j

  • JS获取文本框,下拉框,单选框的值的简单实例

    1.文本框 1.1 <input type="text" name="test" id="test"> 通过var t=document.getElementById("test").value把值赋给变量t, 1.2 当然也可以反过来把已知的变量值赋给文本框,例如: var m = "5";document.getElementById("test").value= m;

  • js中判断用户输入的值是否为空的简单实例

    js中判断用户输入的值是否为空的简单实例

    在js中判断用户输入的值是否为空,这是大家用得非常多的. 这没有什么好写的. 而我却写了. 原因只是自以为是的认为我的这些代码写得不错, 供大家参考一下. 这是摘自的我一个项目的中的用户注册页面.对于大多数人来说,这都几乎是100%经历过的.贴代码吧,这些代码都是用js写的. 不难,很容易看懂. 看的时候,只要区别两个js类就行了.前台页面代码:reguser.aspx 复制代码 代码如下: <%@ Page language="c#" Codebehind="RegU

  • JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3

随机推荐