js獲取鼠標點擊的對象,點擊另一個按鈕刪除該對象的實現(xiàn)代碼

更新時間：2016年05月13日 09:01:27 投稿：jingxian

下面小編就為大家?guī)硪黄猨s獲取鼠標點擊的對象,點擊另一個按鈕刪除該對象的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

今天遇到一個很奇葩的需求,是這樣的:當我點擊文字的時候彈出一個刪除按鈕,可以刪除剛才點擊的文字.

誒?當時想了想,沒什么難度吧.可是,既然是奇葩的需求怎么可能這么簡單.

對,還有一個功能.我并不知道我點了哪個標簽,英文可以承載文字的標簽太多太多....

當時我tm就懵逼了.你都不知道要點哪個標簽,我怎么去綁定事件?給誰綁定事件? 扯了半天,還是要寫.于是就動工了.

我思路是這樣的：

START

1,首先得獲取鼠標點擊的對象.(問題是...我怎么知道點了哪個)

那么先寫個函數(shù)去獲取鼠標點擊的對象吧

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

然后event對象有個target屬性,是可以直接獲取鼠標點擊的對象.

我們log看看

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

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

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

由于刪除按鈕和我們鼠標所點擊的對象并沒有什么聯(lián)系.所以我們得寫個閉包,聲明一個tag去保存我們所點擊的對象.

然后返回兩個函數(shù),一個get.用來獲取鼠標上次點擊的對象.一個是del.顧名思義,刪除點擊的對象.

由于是閉包,所以tag會被保存到內(nèi)存中.正好實現(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ào)用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數(shù)組. 用來存儲我們想刪除的對象
    var tagarr = ['SPAN','H1','H2','H3','H4','H5','H6','P'];
    //判斷如果我們點擊的對象 是不是我們數(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ào)用dt.del() 刪除對象
    dt.del();
  })

看看效果: