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

今天遇到一个奇妙的需求，就是：在我点击文字的时候弹出一个删除按钮，可以删除我刚刚点击的文字。

呃？当时想了想，也不难。然而，既然是一个奇妙的需求，怎么会这么简单呢？

是的，还有一个功能。不知道点了哪个标签。英语中能带单词的标签太多了。

当时我就被tm压倒了。你不知道该订购哪个标签。如何绑定事件？这个事件与谁有关？经过长时间的讨论，我仍然不得不写作。于是我开始工作。

我的思路是这样的：

开始

1、必须先得到鼠标点击的对象。(问题是.我怎么知道我点了哪个)。

然后编写一个函数来获取鼠标点击的对象。

函数get_tag绑定到body的onclick事件，然后接受一个事件参数；

然后，事件对象有一个目标属性，这是一个可以直接获得鼠标点击的对象。

让我们记录下来看看。

是的，你可以。这与事先的想法是一致的。获得了预期的结果。

2、获取对象。但是怎么删除呢？

var del _ tag=function(){ var tag=null；返回{ get : function(e){ tag=e；}，del:function(){ $(标记)。移除()；}}}由于删除按钮与我们用鼠标点击的对象无关，所以我们必须编写一个闭包并声明一个标签来保存我们点击的对象。

然后，返回两个函数，一个是get，用于获取鼠标最后一次点击的对象，另一个是del，顾名思义，删除被点击的对象。

因为是闭包，所以标签会保存在内存中，只是为了实现想要的功能。

3.两者的结合。

var del _ tag=function(){ var tag=null；返回{ get : function(e){ tag=e；}，del:function(){ $(标记)。移除()；} } } var dt=del _ tag()；//将del_tag赋给dt函数get _ tag(e){ varele=e . target；//调用dt.get()参数是get_tag函数事件参数值的目标dt . get($(ele))；} $('#del ')。click(function(){ //这里，因为闭包是创建的，所以保存了我们上次点击的对象。//所以这里我们可以直接调用dt.del()来删除对象dt . del()；})4.看效果。

5.效果还不错。但是.你可以通过随意点击来删除一个对象。这是一团糟吗？那就换。

var del _ tag=function(){ var tag=null；返回{ get : function(e){ tag=e；}，del:function(){ $(标记)。移除()；} } } var dt=del _ tag()；//将del_tag赋给dt函数get _ tag(e){ varele=e . target；$(ele)。css('边框'，' 1px实线红色')var标记名=ele.tagName//定义一个标签数组来存储我们想要删除的对象。var tagarr=['span '，' h1 '，' H2 '，' H3 '，' H4 '，' H5 '，' h6 '，' p ']；//判断我们点击的对象是否在我们的数组中声明，可以删除。If (tagarr。(标记名)-1)的索引{//Call dt.get()参数是get_tag函数的事件参数值的目标dt . get($(ele))；}} $ ('# del ')。click(function(){//这里，因为闭包是创建的，所以保存了我们上次点击的对象。//所以这里我们可以直接调用dt.del()来删除对象dt . del()；})看效果：

嗯。似乎是对的。我们没有定义的对象不能删除。

虽然和删除文字的要求有点不一样，但是只要你告诉我你会用哪些标签来承载文字，我就可以删除。

强调。我们的get_tag()函数不能放在body或html的onclick事件上。否则，整个页面的文本将被删除。

get_tag()函数绑定到要删除文本的div。

上面的js得到了鼠标点击的对象，点击另一个按钮删除对象的实现代码就是边肖分享的全部内容，希望能给大家一个参考和支持。