js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码

 更新时间:2016年05月13日 09:01:27   投稿:jingxian  
下面小编就为大家带来一篇js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

今天遇到一个很奇葩的需求,是这样的:当我点击文字的时候弹出一个删除按钮,可以删除刚才点击的文字.

诶?当时想了想,没什么难度吧.可是,既然是奇葩的需求怎么可能这么简单.

对,还有一个功能.我并不知道我点了哪个标签,英文可以承载文字的标签太多太多....

当时我tm就懵逼了.你都不知道要点哪个标签,我怎么去绑定事件?给谁绑定事件?  扯了半天,还是要写.于是就动工了.

我思路是这样的:

START

1,首先得获取鼠标点击的对象.(问题是...我怎么知道点了哪个)

那么先写个函数去获取鼠标点击的对象吧

 

get_tag这个函数被绑定在body的onclick事件上,然后接受了一个event参数;

然后event对象有个target属性,是可以直接获取鼠标点击的对象.

我们log看看

 

恩,可以的.和预先的思路一致.得到了想要的结果.

2, 得到对象.可是要怎么删除呢?

var del_tag = function(){
    var tag=null;
    return {
      get:function(e){
        tag = e;
      },
      del:function(){
        $(tag).remove();
      }
    }
  }

由于删除按钮和我们鼠标所点击的对象并没有什么联系.所以我们得写个闭包,声明一个tag去保存我们所点击的对象.

然后返回两个函数,一个get.用来获取鼠标上次点击的对象.一个是del.顾名思义,删除点击的对象.

由于是闭包,所以tag会被保存到内存中.正好实现所要的功能.

3. 二者结合

var del_tag = function(){
    var tag=null;
    return {
      get:function(e){
        tag = e;
      },
      del:function(){
        $(tag).remove();
      }
    }
  }

  var dt = del_tag();//把del_tag赋值给dt


  function get_tag(e){
    var ele = e.target;
    //调用dt.get() 参数就是get_tag函数event参数的值的target
    dt.get($(ele));
  }

  $('#del').click(function(){    
    //这里,由于创建了闭包.我们上次点击的对象被保存了起来.
    //所以这里可以直接调用dt.del() 删除对象
    dt.del();
  })

4.看看效果

 

5.效果还不错.可是..随便点击某个对象都可以删除.这是不是就乱套了?接着改

var del_tag = function(){
    var tag=null;
    return {
      get:function(e){
        tag = e;
      },
      del:function(){
        $(tag).remove();
      }
    }
  }

  var dt = del_tag();//把del_tag赋值给dt


  function get_tag(e){

    var ele = e.target;
    $(ele).css('border','1px solid red')
    var tagname = ele.tagName;
    //定义一个tag数组. 用来存储我们想删除的对象
    var tagarr = ['SPAN','H1','H2','H3','H4','H5','H6','P'];
    //判断如果我们点击的对象 是不是我们数组里所声明的,可以删除的.
    if(tagarr.indexOf(tagname) > -1){      
      //调用dt.get() 参数就是get_tag函数event参数的值的target
      dt.get($(ele));
    }  
    
  }

  $('#del').click(function(){  
    
    //这里,由于创建了闭包.我们上次点击的对象被保存了起来.
    //所以这里可以直接调用dt.del() 删除对象
    dt.del();
  })

看看效果:

恩恩.看来对了.不是我们所定义的对象就不可以删除.

虽然和需求上说的删除文字有点区别.但是只要你告诉我你会用那些标签去承载文字.我就可以删除...

强调一下.我们的get_tag()函数可以别放在body或者html的onclick事件上.不然整个页面的文字一点就删除了....

get_tag()函数就绑定在你想删除文字那块div上.

以上这篇js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

    JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

    这篇文章主要介绍了JS实现的将html转为pdf功能,结合完整实例形式分析了基于浏览器端插件jsPDF实现的HTML格式数据转换成pdf具体操作技巧,需要的朋友可以参考下
    2018-02-02
  • JS删除对象中某一属性案例详解

    JS删除对象中某一属性案例详解

    这篇文章主要介绍了JS删除对象中某一属性案例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • JavaScript触发onScroll事件的函数节流详解

    JavaScript触发onScroll事件的函数节流详解

    这篇文章的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流,文中由一个常见的问题开始展开,一步步的介绍解决的方法,有需要的朋友们下面来跟着小编一起看看吧。
    2016-12-12
  • javascript实现电商放大镜效果

    javascript实现电商放大镜效果

    这篇文章主要为大家详细介绍了javascript实现电商放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 性能优化篇之Webpack构建速度优化的建议

    性能优化篇之Webpack构建速度优化的建议

    这篇文章主要介绍了性能优化篇之Webpack构建速度优化的建议,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • js 下拉菜单实现代码

    js 下拉菜单实现代码

    js 下拉菜单实现代码,原理比较简单,需要的朋友可以参考下,具体的美化要靠自己。
    2010-05-05
  • javascript事件模型实例分析

    javascript事件模型实例分析

    这篇文章主要介绍了javascript事件模型用法,实例分析了事件模型、事件对象、事件监听器及事件传递的定义与使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery根据锚点offset值实现动画切换

    jquery根据锚点offset值实现动画切换

    点击后僵硬的切换是不是很不爽,下面为大家介绍的是根据锚点offset值来实现动画切换,喜欢的朋友不要错过
    2014-09-09
  • js 图片随机不定向浮动的实现代码

    js 图片随机不定向浮动的实现代码

    这篇文章介绍了js图片随机不定向浮动的实现代码,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript实现语音排队叫号系统

    JavaScript实现语音排队叫号系统

    语音排队叫号系统广泛用于银行,餐饮,医院等场景。本文主要介绍了通过JavaScript实现的语音排队叫号系统,有扫码排队,语音叫号等功能。需要的可以参考一下
    2021-12-12

最新评论