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

诶"background-color: #ccffcc">我思路是这样的:

START

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

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

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

 

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

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

我们log看看

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

 

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

2, 得到对象.可是要怎么删除呢"htmlcode">

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.效果还不错.可是..随便点击某个对象都可以删除.这是不是就乱套了"htmlcode">

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获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
js获取鼠标点击对象,删除该对象

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。