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也无效 的相关文章

  • 浏览器视口大小(以设备像素为单位)

    Goal 我希望 Flash 能够获得有关浏览器视口宽度和高度 以设备像素为单位 的准确信息初始化 调整大小或浏览器缩放事件时 规格 我需要将 flash 嵌入到在 chrome safari firefox 等中运行的 html 页面中
  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • 如何正确清理来自 AngularJS 控制器的无效输入的表单?

    我有一个 AngularJS 表单 其中包含 除其他字段之外 类型之一url 后者很重要 因为这会强制相应的输入成为有效的 URL 在某些条件下 例如 要关闭具有此类表单的模式对话框 我想以编程方式清除该表单 为此 我实现了方法reset基
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • 如何从 Chrome React Dev Tools 打开 VS code 中的组件文件?

    是否可以右键单击 React Dev 工具下可见的组件 然后单击 在 IDE 中显示 从而在 VSCode 中打开该文件 这将是有益的 因为我不必去寻找该组件 我经常想在 VS Code 中查看某个组件的源代码 但由于组件的模块化复用 代码
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 解决无法使用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 就可以解决 有基础的都知道 数值越大层级越高 可是 我设置了没有效果 看了很多示例 也没有我这样的情况