热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

下面小编就为大家带来一篇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上.

以上这篇js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • Vue 2 中解决页面刷新和按钮跳转导致导航栏样式失效的问题
    本文介绍了如何通过配置路由的 meta 字段,确保 Vue 2 项目中的导航栏在页面刷新或内部按钮跳转时,始终保持正确的 active 样式。具体实现方法包括设置路由的 meta 属性,并在 HTML 模板中动态绑定类名。 ... [详细]
  • 本文探讨了如何通过最小生成树(MST)来计算严格次小生成树。在处理过程中,需特别注意所有边权重相等的情况,以避免错误。我们首先构建最小生成树,然后枚举每条非树边,检查其是否能形成更优的次小生成树。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • 程序员妻子吐槽:丈夫北漂8年终薪3万,存款情况令人意外
    一位程序员的妻子在网上分享了她丈夫在北京工作八年的经历,月薪仅3万元,存款情况却出乎意料。本文探讨了高学历人才在大城市的职场现状及生活压力。 ... [详细]
  • 国内BI工具迎战国际巨头Tableau,稳步崛起
    尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
author-avatar
万万558
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有