下面小編就為大家?guī)?lái)一篇js獲取鼠標(biāo)點(diǎn)擊的對(duì)象,點(diǎn)擊另一個(gè)按鈕刪除該對(duì)象的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

今天遇到一個(gè)很奇葩的需求,是這樣的:當(dāng)我點(diǎn)擊文字的時(shí)候彈出一個(gè)刪除按鈕,可以刪除剛才點(diǎn)擊的文字.

誒?當(dāng)時(shí)想了想,沒(méi)什么難度吧.可是,既然是奇葩的需求怎么可能這么簡(jiǎn)單.

對(duì),還有一個(gè)功能.我并不知道我點(diǎn)了哪個(gè)標(biāo)簽,英文可以承載文字的標(biāo)簽太多太多....

當(dāng)時(shí)我tm就懵逼了.你都不知道要點(diǎn)哪個(gè)標(biāo)簽,我怎么去綁定事件?給誰(shuí)綁定事件? 扯了半天,還是要寫(xiě).于是就動(dòng)工了.

我思路是這樣的：

START

1,首先得獲取鼠標(biāo)點(diǎn)擊的對(duì)象.(問(wèn)題是...我怎么知道點(diǎn)了哪個(gè))

那么先寫(xiě)個(gè)函數(shù)去獲取鼠標(biāo)點(diǎn)擊的對(duì)象吧

get_tag這個(gè)函數(shù)被綁定在body的onclick事件上,然后接受了一個(gè)event參數(shù);

然后event對(duì)象有個(gè)target屬性,是可以直接獲取鼠標(biāo)點(diǎn)擊的對(duì)象.

我們log看看

恩,可以的.和預(yù)先的思路一致.得到了想要的結(jié)果.

2, 得到對(duì)象.可是要怎么刪除呢?

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

由于刪除按鈕和我們鼠標(biāo)所點(diǎn)擊的對(duì)象并沒(méi)有什么聯(lián)系.所以我們得寫(xiě)個(gè)閉包,聲明一個(gè)tag去保存我們所點(diǎn)擊的對(duì)象.

然后返回兩個(gè)函數(shù),一個(gè)get.用來(lái)獲取鼠標(biāo)上次點(diǎn)擊的對(duì)象.一個(gè)是del.顧名思義,刪除點(diǎn)擊的對(duì)象.

由于是閉包,所以tag會(huì)被保存到內(nèi)存中.正好實(shí)現(xiàn)所要的功能.

3. 二者結(jié)合

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;
    //調(diào)用dt.get() 參數(shù)就是get_tag函數(shù)event參數(shù)的值的target
    dt.get($(ele));
  }

  $('#del').click(function(){    
    //這里,由于創(chuàng)建了閉包.我們上次點(diǎn)擊的對(duì)象被保存了起來(lái).
    //所以這里可以直接調(diào)用dt.del() 刪除對(duì)象
    dt.del();
  })

4.看看效果

5.效果還不錯(cuò).可是..隨便點(diǎn)擊某個(gè)對(duì)象都可以刪除.這是不是就亂套了?接著改

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;
    //定義一個(gè)tag數(shù)組. 用來(lái)存儲(chǔ)我們想刪除的對(duì)象
    var tagarr = ['SPAN','H1','H2','H3','H4','H5','H6','P'];
    //判斷如果我們點(diǎn)擊的對(duì)象 是不是我們數(shù)組里所聲明的,可以刪除的.
    if(tagarr.indexOf(tagname) > -1){      
      //調(diào)用dt.get() 參數(shù)就是get_tag函數(shù)event參數(shù)的值的target
      dt.get($(ele));
    }  
    
  }

  $('#del').click(function(){  
    
    //這里,由于創(chuàng)建了閉包.我們上次點(diǎn)擊的對(duì)象被保存了起來(lái).
    //所以這里可以直接調(diào)用dt.del() 刪除對(duì)象
    dt.del();
  })

看看效果: