react绝对定位导致onClick点击事件不生效,设置了z-index也无效

2023-11-10

这是我最近在开发中遇到的问题,网上也查看了资料,有说,因为点击的,不是当前元素,给元素(设onClike事件的元素)设置z-index,就可以解决,有基础的都知道,数值越大层级越高。

可是,我设置了没有效果,看了很多示例,也没有我这样的情况,当时也很紧急,

我就说一下我是怎么解决的事件不生效

(请各位看到的有点点耐心,我拿手机编辑的,没有代码图了)

我是直接将onClick事件,替换成onMouseDown,鼠标按下事件,

前:onClick = {this.fun.bind}

后:onMouseDown = {this.fun}

他就生效了,但是,这里每个鼠标上的按键都是可以触发事件,我只想左键怎么办呢?

需要传入event时间做一个if判断

  if(e.button === 0){

      //e.button=0  是鼠标左键(我有可能也记错了,你们可以查阅一下)

 

      //执行你的功能代码……

  }

 

 

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react绝对定位导致onClick点击事件不生效,设置了z-index也无效 的相关文章

  • Javascript“this”在 IE 中丢失上下文

    以下在 firefox safari chrome 中工作正常 在 IE 中 this 似乎在 handleEvent 函数中丢失上下文 警报的结果是 object Window 这不是我想要的 当从handleEvent 输出时 this
  • “React”在定义之前就被使用了

    我正在使用 create react app typescript eslint 应用程序 在构建过程中出现这样的错误 Line 1 8 React was used before it was defined typescript esl
  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl
  • 个人 Tumblr 帖子上的 Javascript

    我知道您可以编辑在 tumblr 博客上呈现所有帖子博客主页的 html AngularJS 但是 有什么办法可以添加自定义到各个帖子 我想在逐个帖子的基础上做一些 javascript 的东西 但似乎无法找到可以编辑代码的位置 或者 如果
  • tomcat 7.0.50 java websocket 实现给出 404 错误

    我正在尝试使用 Java Websocket API 1 0 JSR 356 中指定的带注释端点在 tomcat 7 0 50 上实现 websocket 以下是我如何对其进行编码的简要步骤 1 使用 ServerEndpoint注解编写w
  • 只保留 A-Z 0-9 并使用 javascript 从字符串中删除其他字符

    我正在尝试验证字符串以使它们成为有效的网址 我只需要保留 A Z 0 9 并使用以下命令从字符串中删除其他字符javascript or jquery 例如 贝儿餐厅 我需要将其转换为 百丽餐厅 所以字符被删除 只保留 A Z a z 0
  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用
  • 对使用“new”创建的数组上“map”的行为感到困惑[重复]

    这个问题在这里已经有答案了 我对结果感到困惑mapping 使用创建的数组new function returnsFourteen return 14 var a new Array 4 gt undefined x 4 in Chrome
  • jquery 中可点击 div 中的按钮

    我有整个 div 您可以单击它来切换该 div 的主要部分 问题是我在该 div 中也有可点击的按钮 当我点击它时 它会执行它应该做的事情 但同时也会切换整个 div 我怎样才能禁用它 Use event stopPropagation 单
  • 使用 JavaScript 防止网页导航离开

    如何使用 JavaScript 防止网页导航离开 Using onunload允许您显示消息 但不会中断导航 因为为时已晚 然而 使用onbeforeunload将中断导航 window onbeforeunload function re
  • 如何在打字稿中使用外部js

    我通过 Typescript 代码生成 Angular JS 代码 在一种情况下 我需要将外部 JS 文件添加到我的打字稿文件中 并且需要访问 js 文件中的类 我像这样添加js文件
  • JQuery $.ajax() 在 java servlet 中发布数据

    我想将数据发送到 java servlet 进行处理 数据将具有可变长度并采用键 值对 A1984 1 A9873 5 A1674 2 A8724 1 A3574 3 A1165 5 数据不需要这样格式化 这就是我现在的方式 var sav
  • ES6 静态方法引用 self? [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository
  • 在循环中调用 setTimeout 未按预期工作

    下面的 JavaScript 应该 在我看来 以 0 5 秒的间隔播放一系列音符 但它会将它们全部作为一个同时的和弦来演奏 知道如何修复它吗 function playRecording if notes length gt 0 for v
  • 如何使用 NextJS 使用自托管字体face?

    使用 NextJS 的字体 我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题 我得到了什么 wait compiling 当我这样做时 font face font family montserrat src url myp
  • 检查浏览器空闲的替代方法

    我有一个简单的网络信息亭 在鼠标未使用 jQuery 移动 30 秒后显示用户操作提示 var i null body wrap mousemove function clearTimeout i overlay fadeOut i set
  • 如何使用 Javascript 在 html 文件中搜索字符串?

    我有 5 个 html 文件 并且有一个搜索表单 我想用它来搜索这些 html 文件中的文本
  • 如何将项目插入到特定索引处的空数组中?

    我想将一个项目插入到空数组的指定索引中 我看到有 Array prototype splice 方法 但是 如果我在空数组上使用 splice 它只会添加项目来结束数组 如下所示 var a a splice 3 0 item 3 cons
  • 如何使用 Javascript OAuth 库不暴露您的密钥?

    看着Twitter OAuth 库 https dev twitter com docs twitter libraries 我看到了这个注释 将 JavaScript 与 OAuth 结合使用时要小心 不要暴露你的钥匙 然后 看着jsOA
  • 深层嵌套 Flexbox 布局是否会导致性能问题?

    我一直在开发一个 ReactJS 项目 其中我使用 Flexbox 布局创建了大部分组件 由于使用 React 我们可以拥有深度嵌套的组件 因此我的布局具有嵌套的 Flexbox 布局 现在我的问题是 这对性能有任何问题吗 在一个页面上 有

随机推荐

  • 解决无法使用gpt的问题

    1 此方法是前提你得有一台服务器之后的操作 2 地区不支持 错误代码1020可以用此方法解决 脚本地址 wget N no check certificate https gitlab com rwkgyg CFwarp raw main
  • 浏览器渲染原理

    浏览器渲染原理 渲染时间点 渲染流水线 解析 HTML Parse HTML 解析 HTML Parse HTML Document Object Model 1 解析 HTML Parse HTML CSS Object Model 解析
  • Eigen 使用碎碎记_norm、normalize、normalized的区别

    本文转载自Eigen中norm normalize normalized的区别 norm normalize normalized的区别 include
  • 小程序实时监听搜索数据并将关键字高亮显示

  • Win10下VS2019双机调试之调试驱动

    转载于 https blog csdn net m0 48995611 article details 112211268 有现成的写的非常详细就不重复造轮子了 ps 1 注意文章字体加深部分 非常重要 2 原文bcdefit dbgset
  • Springboot当中通过引入依赖的形式使用前端框架

    在现在很多大型公司很多都前后端分离开发 而前端也是独立启动的 但是也有很多公司直接是独立的一个项目 前端页面直接在java程序当中 应对与这种独立项目我们可以采用springboot给我们提供的依赖形式来引入前端包 也挺方便的 需要的朋友们
  • Android Studio中重写onClick()方法时,出现Method does not override method from its supperclass问题

    用实现接口的方式来重写监听器中的onClick 方法 改正方法 应在让该类继承implements View OnClickListener
  • UNIX网络编程卷一 学习笔记 第十二章 IPv4与IPv6的互操作性

    未来数年内 因特网也许会逐渐从IPv4过渡到IPv6 在过渡阶段 基于IPv4的现有应用能与基于IPv6的全新应用协同工作非常重要 例如 厂商不应只提供仅能与IPv6 telnet服务器程序协同工作的telnet客户程序 而既应该提供能与I
  • 北京大学肖臻老师《区块链技术与应用》公开课笔记3——BTC数据结构篇

    北京大学肖臻老师 区块链技术与应用 公开课笔记 比特币数据结构篇 对应肖老师视频 click here 全系列笔记请见 click here About Me 点击进入我的Personal Page Hash pointer 哈希指针 指针
  • 入门PCB设计AD9学习笔记8-PCB布板规则

    写作前面 最近在学PCB设计 发现杜洋工作室的入门PCB设计讲的非常详细 适合初学者 由于是视频讲解形式 不利于后期再索引搜索各个知识点细节 所以这里做上笔记方便自己消化和之后内容的索引 惊喜发现已经有前辈写过前几集的内容整理 写的很详细
  • Rigidbody2D ( Simulated )

    bool类型 设为false后则不会模拟刚体
  • 一个TCP长连接设备管理后台工程(一)---概述

    一个TCP长连接设备管理后台工程 一 概述 这个项目最初只是用来进行一个简单的协议测试用的 而且是一个纯粹的后端命令行工程 只是后面想着只有命令行 操作也不太方便 于是便有了添加一个ui的想法 golang项目要配ui 最佳的还是配一个前端
  • 微信小程序之生成图片分享 二维码分享 canvas绘制

    如果本文对你有用 请爱心点个赞 提高排名 帮助更多的人 谢谢大家 如果解决不了 可以在文末进群交流 添加画布 首先 在小程序里进行绘图操作需要用到
  • css3动画 提交成功圆圈画对勾

    这里写目录标题 提交成功圆圈画对勾 遇到的问题 问题一 对号的动画要在圆圈执行完动画后执行 解决 问题二 css不能在display none和display block之间进行动画 解决 代码 提交成功圆圈画对勾 这是一个动画效果 可以直
  • Java多线程进阶(JUC)

    1 什么是JUC JUC实际上是Java包的缩写 java util concurrent包 2 回顾线程和进程 1 进程 一个程序 例如QQ exe 进程是程序的集合 进程是CPU调度的基本单位 一个进程可以有多个线程 至少包含一个 Ja
  • python3.7的版本号安装tensorflow

    步骤 1 下载tensorflow的whl包 由于tensorflow还没有官方支持python3 7 所以pip直接是搜索不到合适的tensorflow的 所以需要下载whl文件包手动安装 有人说google的网址上不去没法下载 解决办法
  • STM32驱动MPU6050基于IIC协议

    一 简介 MPU6050是一款六轴陀螺仪 可以通过IIC协议输出三个方向上的加速度和角速度 在平衡车和飞控中较为常见 一般情况下 模块有用的引脚只有四个 其它的不常用 即VCC GND SDA和SCL 操作它的第一步 即编写IIC协议 二
  • Echarts给折线图给横竖坐标轴添加箭头与标签文字过长显示不全处理

    本人在做监控数据大屏时曾踩过不少坑 现将踩坑经验总结如下 数据大屏demo请点击这里 一 饼图处理标签文字过长而显示不全的解决方案 在使用echarts的过程中 有时会遇到标签文字过长导致显示不全的问题 如下图 例如图中检查结果和处罚种类都
  • 设计模式(1) - UML类图

    1 前言 从这一节开始 我们将一起学习设计模式 我们的学习目标是什么呢 了解常用设计模式以及它们的使用场景 分析实际工程中设计模式的使用 揣摩实际意图 了解作者设计思路 尝试运用设计模式迭代 重构自己的代码 提升软件架构设计思路 最近在阅读
  • react绝对定位导致onClick点击事件不生效,设置了z-index也无效

    这是我最近在开发中遇到的问题 网上也查看了资料 有说 因为点击的 不是当前元素 给元素 设onClike事件的元素 设置z index 就可以解决 有基础的都知道 数值越大层级越高 可是 我设置了没有效果 看了很多示例 也没有我这样的情况