className的存在阻止调用onClick处理程序
presence of className preventing onClick handler being called
我有一个简单的React组件:
class FilterCheckBox extends React.Component {
clickCheckBox(e) {
console.log('clicked on checkbox');
}
render(){
return (
<div>
<a className="filter-checkbox" onClick={this.clickCheckBox.bind(this)}>
<span>{this.props.area.key}</span>
<span>{this.props.area.doc_count}</span>
</a>
</div>
)
}
}
使用如上所述指定的className,onClick处理程序永远不会被调用。但是,如果我删除className声明,onClick就可以正常工作。
该类添加的样式为:
.filter-checkbox,
.filter-checkbox:link,
.filter-checkbox:visited,
.filter-checkbox:focus {
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
-webkit-transition: color 0.5s ease;
transition: color 0.5s ease;
color: #546e7a;
text-transform: uppercase;
text-decoration: none;
font: normal normal 700 0.875em/1.2em "Oxygen", sans-serif;
/*14px*/
outline: none;
position: relative;
display: block;
margin-bottom: 10px;
}
/* line 330, ../scss/partials/_reusables.scss */
.filter-checkbox:before,
.filter-checkbox:link:before,
.filter-checkbox:visited:before,
.filter-checkbox:focus:before {
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
content: '';
background: #ffffff;
border: 1px solid #cfd8dc;
color: #007cba;
clear: none;
cursor: pointer;
display: inline-block;
height: 15px;
line-height: 0;
width: 15px;
outline: none;
vertical-align: middle;
margin: -3px 10px 0 0;
}
/* line 347, ../scss/partials/_reusables.scss */
.filter-checkbox:after,
.filter-checkbox:link:after,
.filter-checkbox:visited:after,
.filter-checkbox:focus:after {
display: none;
content: ''f00c';
color: #ffffff;
font: normal normal 400 11px/11px FontAwesome;
position: absolute;
top: 2px;
left: 2px;
}
/* line 356, ../scss/partials/_reusables.scss */
.filter-checkbox:hover,
.filter-checkbox:link:hover,
.filter-checkbox:visited:hover,
.filter-checkbox:focus:hover {
color: #50d583;
text-decoration: none;
}
/* line 361, ../scss/partials/_reusables.scss */
.filter-checkbox.active:before,
.filter-checkbox:link.active:before,
.filter-checkbox:visited.active:before,
.filter-checkbox:focus.active:before {
border: 1px solid #50d583;
background: #50d583;
}
/* line 365, ../scss/partials/_reusables.scss */
.filter-checkbox.active:after,
.filter-checkbox:link.active:after,
.filter-checkbox:visited.active:after,
.filter-checkbox:focus.active:after {
display: block;
}
我在这里看不到任何能阻止事件传播的东西,所以一定有什么我不太理解的地方。。?
事实证明,这是由另一个脚本引起的,该脚本使用jquery捕获点击事件,以针对特定类名。
通过一个消除过程发现-首先消除所有脚本并恢复,直到问题再次出现。然后检查问题脚本,直到我发现有问题的行。
感谢您的回复。
相关文章:
- 如何使用onClick处理程序在React组件中创建链接
- 如何获取变量's设置元素时的文字值's onclick处理程序
- 从onclick处理程序获取URL
- onClick处理程序未向ReactDOMServer.renderToString注册
- React组件onClick处理程序不工作
- 如何找到元素'的onClick处理程序实际上是与jQuery一起添加的
- 更改在页面加载后动态添加的元素的 onclick 处理程序
- Javascript:在为动态创建的对象设置 onClick 处理程序时避免 eval()
- 从 HTML 元素(如 onclick 处理程序)调用 RequireJs 模块中的方法
- 带有 jquery 的 Onclick 处理程序
- D3 onClick 处理程序在执行时似乎具有错误的范围
- 在onclick处理程序中修改目标url
- 使用Jquery从另一个元素委派一个元素的onclick处理程序
- 动态创建OnClick处理程序Jquery
- className的存在阻止调用onClick处理程序
- IE在添加到onclick处理程序时从缓存中获取脚本(动态添加)
- 在动态添加的元素的onclick处理程序中引用JavaScript函数
- reactjs onClick处理程序未附加在Windows 8和7上的IE11上
- 我在表的每一行中都有一个按钮:OnClick 处理程序如何判断它是从哪一行调用的
- 传递一个函数表达式,用作按钮的onclick处理程序