js獲取鼠標點擊的對象,點擊另一個按鈕刪除該對象

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

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

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

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

我思路是這樣的:

START

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

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

 

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

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

我們log看看

 

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

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

 

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

看看效果:

恩恩.看來對了.不是我們所定義的對象就不可以刪除.

雖然和需求上說的刪除文字有點區別.但是只要你告訴我你會用那些標簽去承載文字.我就可以刪除...

強調一下.我們的get_tag()函數可別放在body或者html的onclick事件上.不然整個頁面的文字一點就刪除了....

get_tag()函數就綁定在你想刪除文字那塊div上.

END

(第一次混博客園,求大神輕噴)

<!--

作者：mgso
出處：http://www.cnblogs.com/mgso/p/5487464.html
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。謝謝合作。

-->