gpt4 book ai didi

javascript cancelBubble 不适用于 firefox

转载 作者:行者123 更新时间:2023-11-30 09:07:53 26 4
gpt4 key购买 nike

blow 代码在 IE 上工作正常,但在 firefox 上不起作用,为什么?我的代码有问题吗?如何解决?

<html>
<head>
<style>
body{font-family:Arial;font-size:12px;font-weight:normal;line-height:28px;}
.product_tips{
width:500px;
background:#f0f0f0;
border:1px solid #ccc;
padding:8px;
margin-top:3px;
}
span{cursor:pointer;}
</style>
<script type="text/javascript">
function get(id){
return document.getElementById(id);
}
function showTip(e){
if(get("product_tips").style.display == "none"){
get("product_tips").style.display = "block";
} else{
get("product_tips").style.display = "none";
}
stopBubble(e)
}
function stopBubble(e) {
if (e){
e.stopPropagation();
}
else{
window.event.cancelBubble = true;
}
}
document.onclick = function(){
get("product_tips").style.display = "none";
}
</script>
</head>
<body>
<div class="relative_">
<label><input type="text" name="#" value="" id="product_name" maxlength="6" /></label>&nbsp;&nbsp;<span onclick="showTip();">help ?</span>
<div id="product_tips" class="product_tips" style="display:none;" onclick="stopBubble();">
<div class="product_inbox">
<p>content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
</div>
</body>
<html>

此处演示:http://jsbin.com/ivosa3

最佳答案

尽量不要在属性中设置事件处理程序,而是在脚本中设置它。以下内容适用于 IE 和 Firefox:

<html>
<head>
<style>
body{font-family:Arial;font-size:12px;font-weight:normal;line-height:28px;}
.product_tips{
width:500px;
background:#f0f0f0;
border:1px solid #ccc;
padding:8px;
margin-top:3px;
}
span{cursor:pointer;}
</style>
<script type="text/javascript">
function get(id){
return document.getElementById(id);
}
function showTip(e){
if(get("product_tips").style.display == "none"){
get("product_tips").style.display = "block";
} else{
get("product_tips").style.display = "none";
}
stopBubble(e)
}
function stopBubble(e) {
if (e){
e.stopPropagation();
}
else{

window.event.cancelBubble = true;
}
}
document.onclick = function(e){
get("product_tips").style.display = "none";
}
</script>
</head>
<body>
<div class="relative_">
<label><input type="text" name="#" value="" id="product_name" maxlength="6" /></label>&nbsp;&nbsp;<span id="help">help ?</span>
<div id="product_tips" class="product_tips" style="display:none;">
<div class="product_inbox">
<p>content content content content content content content content content content content content content content content content content content content content </p>
</div>
</div>
</div>
<script type="text/javascript">
get('help').onclick = showTip;
get('product_tips').onclick = stopBubble;
</script>
</body>
<html>

关于javascript cancelBubble 不适用于 firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3315137/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com