button与a冲突事件

最新推荐文章于 2024-06-10 17:22:17 发布

原创最新推荐文章于 2024-06-10 17:22:17 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器差异

Javascript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了解决火狐浏览器中a标签被button覆盖的问题，提供了两种有效的方法来确保链接正常工作，并保持良好的用户体验。

在火狐中
当我们在button中添加一个a标签时，点击button不会点击a，也就是说，button将a覆盖了。
但是在谷歌里面不会覆盖

解决方法一：

<button id="btn" onclick="a.click();">
  <a id="a" href="https://www.baidu.com/" value="">按钮</a>
</button>

这样就弥补了火狐的不足，也弥补了空白部分不反应的现象
我们在style中添加字体颜色即可以避免链接难看的原样式

方法二

<a type="button" class="btn btn-primary" href=""  style="color: white;">button</a>

感觉这种方法虽然粗暴了一些，但是很实用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_Lilly

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

《Android 开发艺术探索》笔记4--View事件分发与滑动冲突

行动者&&职业化

09-07

2303

思维导图View事件分发机制点击事件传递规则事件分发的源码解析View的滑动冲突滑动冲突的解决方式参看文章思维导图 View事件分发机制点击事件传递规则所谓点击事件的事件分发,就是对MotionEvent事件的分发过程,传递给某一个View. 在事件传递中有三个方法是贯穿始终的 dispatchTouchEvent():进行事件的分发如果事件能传递到View那么此方法一定会被调用,返回值受当前View的onTouchEvent()和下级View的dispatchTouchEvent()的影.

事件冲突原因与解决方案大解密

u014706684的博客

05-23

808

一直想写一下自己对事件分发是总结的，但是又不知道从何写起。那我们就先从一个一个案例，再到源码一步步深入总结。案例案例一： btn_click = (Button) findViewById(R.id.btn_click); btn_click.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) {

参与评论您还未登录，请先登录后发表或查看评论

关于a标签的href属性与 click事件冲突

weixin_33874713的博客

09-26

1559

2019独角兽企业重金招聘Python工程师标准>>> ...

给按钮添加跳转功能【类似a标签】

只在朝暮间的博客

05-18

1689

方法 window.location.href = “要跳转的URL”; 或 window.location = “要跳转的URL”; 或 location = “要跳转的URL”; 示例 <!DOCTYPE html> <html> <head> <meta charset="utf...

HTML 实现点击按钮切换整张界面 && 点击按钮切换局部界面

热门推荐

m0_63669388的博客

10-21

1万+

本文详细介绍了在前端如何用button按钮实现页面切换的几种方法，包括a标签重定向等等方法，并附有代码易于理解。

button 标签

藏经阁

07-12

1177

1.button标签和a标签 button标签包含a标签，则鼠标放在上面时会有下划线 a标签包含button标签则不会有下划线（也可以用p标签，也可以直接写） 2.button标签可以是 type=“submit” 3.button标签可以在submit的同时运行onclick指定的函数 ...

a链接与button按钮混用

weixin_30439131的博客

09-12

483

1、第一种： <a href="目标地址"><input type="button" value="提交"></a> 2、第二种： <input type="button" value="提交" onclick="location.href='目标路径'"/> 使用这两种方法根据情况而定。转载于:https://www.cn...

ant design vue a-table @row-click 事件与行内点击事件冲突解决

11-09

Ant Design Vue 中的 `a-table` 组件的 `@row-click` 事件通常用于处理整行的点击操作，而如果你想在表格单元格内部添加行内点击事件，可能会遇到冲突，因为这两个事件默认都会触发。当用户点击单元格时，由于`@...

安卓事件交互（按键事件、触摸事件、手势识别、手势冲突处理）

weixin_42369301的博客

06-10

2355

文章介绍了包括按键事件、触摸事件、手势识别以及手势冲突处理等安卓事件交互内容。

一步步自定义下拉刷新上拉加载——事件分发与滑动冲突

梦的起点

01-30

1209

一、必备基础二、入门三、进阶四、优化自定义下拉刷新组件之前，必须要了解什么是事件分发机制。按照顺序阅读，看完郭霖事件分发机制上，郭霖事件分发机制下，和鸿洋事件分发机制上，鸿洋事件分发机制下以后结合Android开发艺术探索和源码，然后看事件分发机制总结这篇，基本能够掌握事件分发机制了。事件分发机制的内容对于初学者而言，是反复看，实践过后再理解便能掌握其原理。下面我们...

button与a标签的区别

07-24

button与a标签的区别

Firefox下代码触发a标签的click事件无效

weixin_30536513的博客

07-26

656

通过一次导出功能是让自己如何一步一步掉坑最后又是怎么爬起来的在页面中通过document.createElement('a');创建一个a标签，然后给a标签的href属性赋url，通过代码触发a标签的click事件请求后台，在Chrome浏览器中请求正常，但是在Firefox中始终无效，debugger发现代码也走到了a.click()方法，但是就是没反应。代码如下： $.ajax({...

button下嵌套a标签导致火狐浏览器无法下载

黑星

02-28

873

背景最近项目碰到一个兼容问题，在Chrome下正常下载的模板火狐下载不了解决错误写法 <button class="btn btn-primary btn-sm" type="button"> <span><a href="./add_service_v1.xlsx">下载模板</a></span> &

a标签中如果有button（或button标签中有a标签）,那么在IE下就不能跳转到herf的链接...

weixin_34010566的博客

01-11

2371

2019独角兽企业重金招聘Python工程师标准>>> ...

button包含a标签在 ie，360 等浏览器无法跳转的问题解决

Bolview的博客

12-12

3055

<button><a href="http://www.baidu.com"></a></button> 有时为了使超链接拥有按钮的样式，就会使用 button 包含 a 标签的写法这种写法在 IE浏览器或 360浏览器中会出现 button 点击无响应的情况，谷歌、火狐则可以识别解决方法：根本原因：有了 button 部分浏览器...

a标签中可以加button,但是不提倡；button中不能加a标签，否则不能跳转

weixin_30417487的博客

08-02

2648

a标签中可以加button,但是不提倡；button中不能加a标签，否则不能跳转转载于:https://www.cnblogs.com/jianxingjianyuan/p/7274581.html

a 和 button

Melissa的博客

04-27

1326

像 button 的原始目的就是一个通用的按钮，点击后应该触发 JavaScript，没有其它附带的隐含的附加效果；标签的隐含附带效果就是跳转页面到其它地方，而提交表单时应该有一个隐含附带的让浏览器触发提交表单的效果，它就与 button 默认的行为不一样了。所以我们根据这点来区分我们应该用 button 还是用 input 或 a 标签。今天遇到一个难题，代码如

a标签不跳转java_a标签中如果有button（或button标签中有a标签）,那么在IE下就不能跳转到herf的链接...

weixin_29959015的博客

02-25

240

今天才知道，原来a标签里面嵌套input是不符合标准的，所以不能这么做，应该直接把a标签写成按钮的样式，把a标签设置为inline-block就可以了。a标签中如果有button, 那么在IE下就不能跳转到herf的链接。而火狐和google中可以如下：此种在IE中不可以。这边的class中的属性只用于按钮样式。而通过这样在IE中可行。但在火狐和google中则不可以下面这种则在IE,火狐，goo...

button、a标签、input button的区别

qq_31092813的博客

07-24

4890

button a标签 input button的区别适合使用的场景

Button is not a type

最新发布

08-26

在使用UI框架（如React、Flutter或其他前端框架）进行开发时，开发者可能会遇到错误提示如“Button is not a valid type”，这通常表示框架或语言无法识别 `Button` 组件的类型。这种错误可能由多种原因引起，以下是一些常见的原因及其解决方法。 ### 1. 模块导入问题在某些框架中，组件需要从特定模块中导入。如果 `Button` 组件未正确导入，框架将无法识别其类型。例如，在React中使用Material-UI时，必须显式导入 `Button`： ```javascript import Button from '@mui/material/Button'; ``` 如果缺少导入语句或导入路径不正确，JavaScript/TypeScript编译器会将 `Button` 视为未定义的变量或类型，从而导致错误[^1]。 ### 2. 类型定义缺失或错误（TypeScript）在TypeScript项目中，如果手动定义了类型或使用了类型断言，可能会导致类型系统认为 `Button` 不是一个有效的类型。例如： ```typescript const MyButton: Button = <Button>Click me</Button>; ``` 上述代码中，`Button` 被用作类型注解，但 `Button` 本身是一个React组件，而不是类型。正确的做法是使用 `typeof Button` 或直接省略类型注解： ```typescript const MyButton: typeof Button = <Button>Click me</Button>; ``` 或者直接使用组件而不显式指定类型： ```typescript const MyButton = <Button>Click me</Button>; ``` ### 3. 组件命名冲突如果项目中存在同名的变量或类型，可能会导致命名冲突。例如，如果在代码中定义了一个名为 `Button` 的变量或类型，可能会覆盖原本的组件定义： ```javascript const Button = 'MyCustomButton'; ``` 这种情况下，当尝试使用 `<Button />` 时，框架会将其视为字符串而不是组件，从而导致类型错误。解决方法是重命名冲突的变量或类型。 ### 4. 使用错误的组件名称某些UI框架对组件名称大小写敏感，或者要求组件名称符合特定规范。例如，在React中，自定义组件必须以大写字母开头： ```javascript // 正确 function MyButton() { ... } <MyButton /> // 错误 function myButton() { ... } <myButton /> ``` 如果误用了小写名称，React会将其视为内置HTML标签（如 `<button>`），而不是自定义组件，从而导致类型不匹配。 ### 5. 框架版本或依赖问题有时，依赖版本不兼容也可能导致组件无法识别。例如，某个版本的UI库可能已弃用或重命名 `Button` 组件，而项目中仍引用了旧名称。此时应检查文档并更新代码以适配当前版本。此外，如果依赖未正确安装或构建工具配置有误，也可能导致组件未被正确加载。 ---