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实现计算加载页面所用的时间
Apr 02 Javascript
Javascript倒计时代码
Aug 12 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
最简单的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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
在线短消息收发的程序,不用数据库
2006/10/09 PHP
phpmyadmin的#1251问题
2006/11/25 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
js判断密码强度的方法
2020/03/18 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python实现随机爬山算法
2021/01/29 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
青年志愿者先进事迹
2014/05/06 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Mysql 用户权限管理实现
2021/05/25 MySQL