a标签内部的button，JS冒泡问题

最新推荐文章于 2021-11-10 20:36:20 发布
最新推荐文章于 2021-11-10 20:36:20 发布
阅读量620 收藏
点赞数
分类专栏： JS&HTML 文章标签： IE 360 HTML 浏览器

以前一直没有想过冒泡，不过今天居然遇到了。

 

情形是这样的，在我的<a>标签内部只是一个<input type="button">按钮。那么这样我的超链接就失效了。

 

原代码是这样的：

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>

<a href='http://down.360safe.com/setup.exe' target='_blank'>
	<input type='button' class='install_button_yellow' value='立即安装' />
</a>

</body>
</html>

 

这样我的360.exe是下载不下来的（我说的是IE浏览器）。

 

后来把代码改为下面这样初步解决了问题。

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>

<a href='http://down.360safe.com/setup.exe' target='_blank'>
	<input type='button' class='install_button_yellow' value='立即安装' οnclick='window.open(this.parentNode.href);'/>
</a>

</body>
</html>

 

在这里我用了一下this.parentNode找到其上层节点。这样在IE里面这个问题不存在了。

 

还好我这个代码只是放在IE里面的。要不然不是要开好多个窗口。郁闷啊。。

 

当然最好的解决办法是为什么要在<a>标签里面放<button>呢？

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>


	<input type='button' class='install_button_yellow' value='立即安装' οnclick='window.open(\"http://down.360safe.com/setup.exe\");'/>


</body>
</html>
 

iteye_10933
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
a标签IE浏览器兼容问题
GeneralYY0的专栏
01-28 7230
原文：http://hi.baidu.com/pdj408/item/b5d79ec26aaa422399b4986a a标签中如果有button, 那么在IE下就不能跳转到herf的链接 a标签中如果有button, 那么在IE下就不能跳转到herf的链接。而火狐和google中可以 如下：此种在IE中不可以。这边的class中的属性只用于按钮样式。
a标签内部包含button，点击事件a标签不起作用，JS冒泡问题
feiteyizu
03-30 1020
 1.这种写法 360浏览器可以，ie浏览器不行 &lt;a href="${ctx}/test/testhtml" target="Index" &gt; &lt;input type="button" class="btn1" value="添加" /&gt; &lt;/a&gt;     2.这种 都可以 &lt;a h
a标签中可以加button,但是不提倡；button中不能加a标签，否则不能跳转
weixin_30417487的博客
08-02 2558
a标签中可以加button,但是不提倡；button中不能加a标签，否则不能跳转 转载于:https://www.cnblogs.com/jianxingjianyuan/p/7274581.html
关于ui:button的点击事件类型的判断
金拓的专栏
06-12 811
这个button的监听方式和sprite不一样。判断监听类型的时候也被折磨了一下。 闲话少说，直接上代码。一目了然 auto btn_start = static_cast(rootPanel->getChildByName("btn_start")); btn_start->addTouchEventListener(CC_CALLBACK_2(HelloWorld::sta
前端.什么是冒泡和阻止冒泡的原因和方法
生活百般滋味，人生需要笑对
07-04 1万+
咸鱼最近在看微信小程序的开发，在看框架的时候在<btton>中有个被用到的属性叫做bindtap，作用是“事件绑定，不阻止冒泡”。因为之前搞Html和Css为多，没有看过冒泡，所以看到陌生的名词就去查了一圈，在这里总结一下冒泡的概念和为什么要阻止冒泡的原因。一.什么是冒泡？ 首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生
JS检测页面中哪个HTML标签触发点击事件的方法
10-18
这涉及到JavaScript的事件处理机制，特别是事件冒泡和事件捕获的概念。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）。事件捕获则相反，它...
JavaScript Dom 绑定事件操作实例详解
10-16
当点击`#a`时，如果两个事件处理函数都使用冒泡模型，`#a`的事件处理函数先输出，然后是`#A`的事件处理函数；如果使用捕获模型，则顺序相反。 5. **事件解除绑定** 使用`removeEventListener`方法可以移除已绑定...
JS实现的最方便实用的网页计算器源码.zip
11-01
HTML元素可能使用`<input>`或`<button>`标签创建，以便用户交互。 2. **CSS美化**： - CSS（层叠样式表）用于样式化计算器的外观，包括颜色、布局和字体等。这可以涉及使用类选择器、ID选择器或伪类来定制按钮的...
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
`displayDate`函数的定义通常放在`<script>`标签中，或者在外部JavaScript文件中引用。 ```html function displayDate() { document.getElementById("demo").innerHTML = Date(); } ``` 在这个例子中，`...
【JavaScript源代码】vue自定义弹框效果(确认框、提示框).docx
12-29
在Vue.js中，自定义弹框效果是一种常见的需求，它能够提供更加灵活的用户体验和界面交互。本实例展示了如何在Vue项目中实现一个自定义的弹框组件，该组件可以根据传入的`type`参数来区分是确认框还是提示框。 首先...
a 和 button
Melissa的博客
04-27 1155
像 button 的原始目的就是一个通用的按钮，点击后应该触发  JavaScript， 没有其它附带的隐含的附加效果； 标签的隐含附带效果就是跳转页面到其它地方，而提交表单时应该有一个隐含附带的让浏览器触发提交表单的效果， 它就与 button 默认的行为不一样了。所以我们根据这点来区分我们应该用 button 还是用 input 或 a 标签。 今天遇到一个难题，代码如
html的几个标签,关于HTML的几个标签
weixin_30019895的博客
06-14 123
iframe标签iframe标签会在当前页面内嵌套一个页面，这个页面可以通过CSS来控制大小。 iframe页面嵌套iframe标签可以和a标签配合使用，给iframe标签一个name，然后用a标签target指向iframe的name，就可以在iframe的页面展示a标签链接的内容。例如：百度标签的效果如下： a标签跳转a标签a标签的targeta标签的target控制的跳转有4种形式当在ind...
button、a标签、input button的区别
qq_31092813的博客
07-24 4599
button a标签 input button的区别 适合使用的场景
JS如何阻止冒泡事件
weixin_44104809的博客
09-01 1万+
1、背景 1.1 什么是事件冒泡 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。 优点：事件委托可以利用事件冒泡，来达到只指定一个事件处理程序就可以管理某一项类型的所有事件的效果，只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少，整个页面占据的内存空间更少，能够提升整体性能。 1.2 特殊需求 菜单栏的每一项增加一个编辑和删除按钮，因为菜单自带点击事件，在我们点击每个菜单的编辑或删除按钮时候还会去执行一遍菜单执行的操作，这种情况我们就需要阻止编辑和删除按钮的
input的按钮和button按钮的区别
tjq11111的博客
11-10 1613
1.button按钮可以使用图片，更多文字等信息，它可以创建更加丰富的按钮样式 2.在form标签中建议使用input的按钮 3.使用button标签不能忘记添加type属性，因为不同浏览器的button默认type值不一样，type值不一样代表button标签的功能不一样 ...
关于input和button按钮常用的一些属性总结（积累）
时清云的博客
06-14 2709
一些小的细节：1.input输入框如果只读不让修改，加一个属性 readonly readonly div class="userfiled">身份div> div class="userinput"> input name="userType" type="text" value="" readonly> div> 2.input输入框如果限制字数多少，加一个属性 maxlength
a标签中如果有button, 那么在IE下就不能跳转到herf的链接
01-10 286
今天才知道，原来a标签里面嵌套input是不符合标准的，所以不能这么做， 应该直接把a标签写成按钮的样式，把a标签设置为inline-block就可以了。 a标签中如果有button,那么在IE下就不能跳转到herf的链接。而火狐和google中可以 如下：此种在IE中不可以。这边的class中的属性只用于按钮样式。 <ahref="jsp/manage/man...
a标签事件冒泡
热门推荐
jicai520的博客
07-25 1万+
当拥有一个父类时，会出现冒泡的情况 的href属性无效，这个时候需要阻止事件冒泡<!DOCTYPE html > <html> <head> <title>Porschev---Jquery 事件冒泡</title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> </head> <body><form
阻止按钮冒泡事件
qq_16495187的博客
05-25 811
1.冒泡事件 <div id='div' onclick='alert("div");'> <ul onclick='alert("ul");'> <li onclick='alert("li");'>test</li> </ul> </div> 如果点击之后，会依次弹出"li"-“ul”-“div”,弹出是从里面往父级元素执行 vue里面的div <div class="item-tip" @click="TipSho
将a 标签改成button
最新发布
07-14
如果你想定位一个`<button>`元素而不是`<a>`元素，你可以使用类似的方法。 1. 使用find_element_by_xpath方法，通过xpath表达式定位button元素。例如： ```python driver.find_element_by_xpath("//button[@href='http://www.example.com']") ``` 2. 使用find_element_by_css_selector方法，通过CSS选择器定位button元素。例如： ```python driver.find_element_by_css_selector("button[href='http://www.example.com']") ``` 请注意，根据你的实际情况，xpath表达式或CSS选择器可能需要相应地进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值