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


Posted in Javascript onMay 13, 2016

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

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

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

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

我思路是这样的:

START

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

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

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

 

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

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

我们log看看

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

 

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

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.看看效果

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

 

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

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();
  })

看看效果:

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

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

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

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

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

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

Javascript 相关文章推荐
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
php 修改密码实现代码
May 24 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
angular4实现带搜索的下拉框
Mar 25 Javascript
最简单的tab切换实例代码
May 13 #Javascript
浅析创建javascript对象的方法
May 13 #Javascript
全面理解JavaScript中的闭包
May 12 #Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 #Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 #Javascript
js自定义select下拉框美化特效
May 12 #Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 #Javascript
You might like
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
vue之延时刷新实例
2019/11/14 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
建筑施工实习自我鉴定
2013/09/19 职场文书
自荐信格式的六要素
2013/09/21 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
法人授权委托书范本
2014/09/17 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
开学典礼校长致辞
2015/07/29 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server