烦人的NN / Firefox突出Bug [英] Annoying NN/Firefox Highlight Bug
问题描述
大家好，
这个比经过解释的更好，所以我在下面附上一个代码
样本。请保存（作为html文件）并使用NN或
Firefox（或者甚至是Mozilla）查看，然后查看。加载时：
（1。）将鼠标放在顶部菜单上item。
（菜单打开）
（2。）移动到任何子菜单项。
（3。）点击在当前
子项目的左侧或右侧（但不在文本上）
（菜单崩溃）
（4。 ）现在将mose放在顶级菜单上
- >菜单按预期打开，但出现恼人的亮点
，然后按下鼠标。
请告诉我这是一个解决方法。
------------------------ HTML -------------- ----------
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http：//www.w3.org/TR/html4/loose.dtd">
< html>
< head>
< meta http-equiv =" Content-Type" content =" text / html;
charset = iso-8859-1">
< script type =" text / javascript"> ;
函数getIndex（）{
if（navigator.appName ==" Microsoft Internet Explorer"）{
返回2;
}
否则if（navigator.appName ==" Netscape"）{
返回3;
}
}
函数bindListeners（）{
var anchors = document.getElementsByTagName（" A）;
for（i = 0; i< anchors.length; i ++）{
anchors [i] .onmousedown = function（） {
this.className =" mouseDown";
}
anchors [i] .onmouseup = function（）{
this.className =" mouseUp";
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if（object.tagName.toUpperCase（）==''BODY''）{
// top-m enu
this.parentNode.childNodes [getIndex（）]。style.display =''none'';
}
else if（object1.tagName.toUpperCase（）==''BODY''）{
//子菜单
this.parentNode.parentNode.style.display =
''没有';
}
}
anchors [i]。 onmouseover = function（）{
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if（object.tagName.toUpperCase（）==''BODY''）{
// top-menu
this.parentNode.childNodes [getIndex （）]。style.display =''block'';
}
else if（
object.parentNode.parentNode.tagName。 toUpperCase（）==''BODY''）{
//子菜单
this.parentNode.parentNode.style.display =
''阻止'';;
}
}
}
}
< / script>
< ; style type =" text / css">
li {
background-color：#FFFFFF;
字体-weight：normal;
font-family：arial;
font-size：12px;
text-align：center ;
保证金：0;
填充：0;
身高：1％;
}
ul {
保证金：0;
填充：0;
list-style：none; < br $>
}
a {
显示：块;
宽度：120px;
text-decoration：none;
颜色：＃000000;
填充：2px 15px 2px 15px;
}
li：hover ul {
display：block;
}
li ul {
显示：无;
}
body li {
宽度：150px;
}
li.collapse {
display：none;
}
ul li ul li {
border-top：1px纯黑色;
}
li.topMenu {
边框：1px纯黑色;
}
< / style>
< title> ; test< / title>
< / head>
< body onLoad =" bindListeners（）">
< ul>< li class =" topMenu">
< a href ="＃">热门菜单< / a>
< ul>
< li>< a href ="＃">子菜单1< / a>< / li>
< li>< a href ="＃">子菜单2< / a>< / li>
< li>< a href ="＃">子菜单3< / a>< / li>
< li>< a href ="＃">子菜单4< / a>< / li>
< / ul>
< / li>< / ul>
< / body>
< / html>
----------------------- - HTML ------------------------
我想知道这是不是这个家伙的错误谈论？
http://groups.google.co.uk/groups?se...&output= gplain
谢谢，
- Olumide
Hi everyone,
This one is better experienced than explained, so I''m including a code
sample below. Please and save (as an html file) and view with NN or
Firefox (or maybe even Mozilla), and then view. When loaded:
(1.) Place the mouse over "Top Menu" item.
(The menu opens)
(2.) Move to any of the sub-menu items.
(3.) Click on the left or right (but NOT on the text) of the current
sub-item
(The menu collapses)
(4.) Now place the mose over the top-menu
-> The menu opens as expected, but the an annoying highlight
appears, and follows the mouse.
Please tell me there''s a work-around.
------------------------ H T M L ------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function getIndex(){
if (navigator.appName == "Microsoft Internet Explorer"){
return 2;
}
else if (navigator.appName == "Netscape"){
return 3;
}
}
function bindListeners(){
var anchors = document.getElementsByTagName("A");
for (i = 0; i < anchors.length; i++){
anchors[i].onmousedown = function() {
this.className = "mouseDown";
}
anchors[i].onmouseup = function() {
this.className = "mouseUp";
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if (object.tagName.toUpperCase() == ''BODY''){
// top-menu
this.parentNode.childNodes[getIndex()].style.display = ''none'';
}
else if( object1.tagName.toUpperCase() == ''BODY'' ){
// sub-menu
this.parentNode.parentNode.style.display =
''none'';
}
}
anchors[i].onmouseover = function(){
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if (object.tagName.toUpperCase() == ''BODY''){
// top-menu
this.parentNode.childNodes[getIndex()].style.display = ''block'';
}
else if(
object.parentNode.parentNode.tagName.toUpperCase() == ''BODY'' ){
// sub-menu
this.parentNode.parentNode.style.display =
''block'';;
}
}
}
}
</script>
<style type="text/css">
li {
background-color: #FFFFFF;
font-weight: normal;
font-family: arial;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
height: 1%;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a {
display: block;
width: 120px;
text-decoration: none;
color: #000000;
padding: 2px 15px 2px 15px;
}
li:hover ul {
display: block;
}
li ul {
display: none;
}
body li{
width: 150px;
}
li.collapse {
display: none;
}
ul li ul li {
border-top: 1px solid black;
}
li.topMenu {
border: 1px solid black;
}
</style>
<title>test</title>
</head>
<body onLoad="bindListeners()">
<ul><li class="topMenu">
<a href="#">Top Menu</a>
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 4</a></li>
</ul>
</li></ul>
</body>
</html>
------------------------ H T M L ------------------------
I wonder if this is the same bug that this guy is talking about?
http://groups.google.co.uk/groups?se...&output=gplain
Thanks,
- Olumide
推荐答案
50***@web.de 写道：
大家好，
这个比经过解释的更有经验，所以我在下面加了一个代码
。请保存（作为html文件）并使用NN或
Firefox（或者甚至是Mozilla）查看，然后查看。加载时：
（1。）将鼠标放在顶部菜单上。项目。
（菜单打开）
（2。）移动到任何子菜单项。
（3。）单击左侧或右侧（但不在文本上）当前
子项目
（菜单崩溃）
（4。）现在将mose放在顶级菜单上
- >菜单按预期打开，但出现了一个恼人的亮点
，并且跟着鼠标。
请告诉我有一个解决方法。
对于您不想要文字选择的项目，只需添加：
li {
-moz -user-select：none;
}
给你的CSS
问题解决了......
------------------------ HTML --------------- ---------
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http：// www .w3.org / TR / html4 / loose.dtd">
< html>
< head>
< meta http-equiv =" Content-Type" content =" text / html;
charset = iso-8859-1">
< script type =" text / javascript">
function getIndex（）{
如果（navigator.appName ==" Microsoft Internet Explorer"）{
返回2;
}
if if（navigator。 appName ==" Netscape"）{
返回3;
}
}
函数bindListeners（）{
var anchors = document.getElementsByTagName（" A"）;
for（i = 0; i< anchors.length; i ++）{
anchors [i] .onmousedown = function（）{
this.className =" mouseDown";
}
anchors [i] .onmouseup = function（）{
this.className =" mouseUp";
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if（object.tagName.toUpperCase（）==''BODY''）{
// top-menu
this.parentNode.childNodes [getIndex（）]。style.display = ''none'';
}
如果（object1.tagName.toUpperCase（）==''BODY''）{
//子菜单
this.parentNode .parentNode.style.display =
''没有';
}
anchors [i] .onmouseover = function（）{
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if（object.tagName.toUpperCase（）==''BODY ''）{
//顶级菜单
this.parentNode.childNodes [getIndex（）]。style.display =''block'';
}
else if（
object.parentNode.parentNode.tagName.toUpperCase（）==''BODY''）{
//子菜单
this.parentNode.parentNode.style.display =
''block'';;
}
}
}
}
< / script>
< style type =" text / css">
li {
background-color：#FFFFFF;
font-weight：normal;
font-family：arial;
font-size：12px;
text-align：center;
margin：0;
填充：0;
高度：1％;
}
ul {
保证金：0;
填充：0;
list-style：none;
}
a {
显示：块;
宽度：120px;
text-decoration：none;
颜色：＃000000;
填充：2px 15px 2px 15px;
}
li：hover ul {
display：block;
}
{li /> display：none;
}
body li {
宽度：150px;
}
li.collapse {
显示：无;
}
ul li ul li {
border-top：1px solid black;
}
li.topMenu {
border：1px solid black;
}
< / style>
< title> test< / title>
< / head>
< body onLoad =" bindListeners（）">
< ul>< li class =" topMenu">
< a href ="＃">热门菜单< / a>
< ul>
< li> ;< a href ="＃">子菜单1< / a>< / li>
< li>< a href ="＃">子菜单2< ; / a>< / li>
< li>< a href ="＃">子菜单3< / a>< / li>
< li> < a href ="＃">子菜单4< / a>< / li>
< / ul>
< / li>< / ul>
< / body>
< / html>
------------------------ HTML --------------------- ---
我想知道这个人是否正在谈论这个错误？
http://groups.google.co.uk/groups?se...&output=gplain
谢谢，
- Olumide
Hi everyone,
This one is better experienced than explained, so I''m including a code
sample below. Please and save (as an html file) and view with NN or
Firefox (or maybe even Mozilla), and then view. When loaded:
(1.) Place the mouse over "Top Menu" item.
(The menu opens)
(2.) Move to any of the sub-menu items.
(3.) Click on the left or right (but NOT on the text) of the current
sub-item
(The menu collapses)
(4.) Now place the mose over the top-menu
-> The menu opens as expected, but the an annoying highlight
appears, and follows the mouse.
Please tell me there''s a work-around.
for items in which you do not want text selection, simply add:
li {
-moz-user-select: none;
}
to your css
problem solved...
------------------------ H T M L ------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">
function getIndex(){
if (navigator.appName == "Microsoft Internet Explorer"){
return 2;
}
else if (navigator.appName == "Netscape"){
return 3;
}
}
function bindListeners(){
var anchors = document.getElementsByTagName("A");
for (i = 0; i < anchors.length; i++){
anchors[i].onmousedown = function() {
this.className = "mouseDown";
}
anchors[i].onmouseup = function() {
this.className = "mouseUp";
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if (object.tagName.toUpperCase() == ''BODY''){
// top-menu
this.parentNode.childNodes[getIndex()].style.display = ''none'';
}
else if( object1.tagName.toUpperCase() == ''BODY'' ){
// sub-menu
this.parentNode.parentNode.style.display =
''none'';
}
}
anchors[i].onmouseover = function(){
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if (object.tagName.toUpperCase() == ''BODY''){
// top-menu
this.parentNode.childNodes[getIndex()].style.display = ''block'';
}
else if(
object.parentNode.parentNode.tagName.toUpperCase() == ''BODY'' ){
// sub-menu
this.parentNode.parentNode.style.display =
''block'';;
}
}
}
}
</script>
<style type="text/css">
li {
background-color: #FFFFFF;
font-weight: normal;
font-family: arial;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
height: 1%;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
a {
display: block;
width: 120px;
text-decoration: none;
color: #000000;
padding: 2px 15px 2px 15px;
}
li:hover ul {
display: block;
}
li ul {
display: none;
}
body li{
width: 150px;
}
li.collapse {
display: none;
}
ul li ul li {
border-top: 1px solid black;
}
li.topMenu {
border: 1px solid black;
}
</style>
<title>test</title>
</head>
<body onLoad="bindListeners()">
<ul><li class="topMenu">
<a href="#">Top Menu</a>
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 4</a></li>
</ul>
</li></ul>
</body>
</html>
------------------------ H T M L ------------------------
I wonder if this is the same bug that this guy is talking about?
http://groups.google.co.uk/groups?se...&output=gplain
Thanks,
- Olumide
50 *** @ web.de 写道：
大家好，
这个经验比解释好，所以我我在下面包含一个代码
示例。请保存（作为html文件）并使用NN或
Firefox（或者甚至是Mozilla）查看，然后查看。加载时：
（1。）将鼠标放在顶部菜单上。项目。
（菜单打开）
（2。）移动到任何子菜单项。
（3。）单击左侧或右侧（但不在文本上）当前
子项目
（菜单崩溃）
（4。）现在将mose放在顶级菜单上
- >菜单按预期打开，但出现了一个恼人的亮点
，并且跟着鼠标。
请告诉我有一个解决方法。
请不要使用标签发布代码。使用2或4个空格进行缩进。
手动包装代码以防止包装错误。
[...]
函数getIndex（）{
if（navigator.appName ==" Microsoft Internet Explorer"）{
返回2;
}
否则if（navigator.appName ==" Netscape" ;）{
返回3;
}
}
此功能背后的概念存在缺陷，见下文。
函数bindListeners（）{
var anchors = document.getElementsByTagName（" A"）;
for（i = 0; i< anchors.length; i ++） {
anchors [i] .onmousedown = function（）{
this.className =" mouseDown" ;;
}
anchors [i] .onmouseup = function（）{
this.className =" mouseUp";
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
您似乎在猜测有多少个父节点会将您带到
< body>标签，然后根据该标签，在列表的开头到达< ul>
标记需要多少。请参阅下面的更高效的
解决方案。
if（object.tagName.toUpperCase（）==''BODY''）{
这里更有效的测试是：
if（/body/i.test(object.tagName））{
//顶级菜单
this.parentNode.childNodes [getIndex（）]。style.display =''none'';
}
if if（object1.tagName。 toUpperCase（）==''BODY''）{
//子菜单
this.parentNode.parentNode.style.display =
''none'';
}
}
anchors [i] .onmouseover = function（）{
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if（object.tagName.toUpperCase（）==''BODY''）{
// top-menu
这个.parentNode.childNodes [getIn dex（）]。style.display =''block'';
}
if if（
object.parentNode.parentNode.tagName.toUpperCase（）==''BODY''） {
//子菜单
this.parentNode.parentNode.style.display =
''block'';;
}
}
}
}
< / script>
Hi everyone,
This one is better experienced than explained, so I''m including a code
sample below. Please and save (as an html file) and view with NN or
Firefox (or maybe even Mozilla), and then view. When loaded:
(1.) Place the mouse over "Top Menu" item.
(The menu opens)
(2.) Move to any of the sub-menu items.
(3.) Click on the left or right (but NOT on the text) of the current
sub-item
(The menu collapses)
(4.) Now place the mose over the top-menu
-> The menu opens as expected, but the an annoying highlight
appears, and follows the mouse.
Please tell me there''s a work-around.
Please don''t post code with tabs. Use 2 or 4 spaces for indenting.
Manually wrap code to prevent wrapping errors.
[...]
function getIndex(){
if (navigator.appName == "Microsoft Internet Explorer"){
return 2;
}
else if (navigator.appName == "Netscape"){
return 3;
}
}
The concept behind this function is flawed, see below.
function bindListeners(){
var anchors = document.getElementsByTagName("A");
for (i = 0; i < anchors.length; i++){
anchors[i].onmousedown = function() {
this.className = "mouseDown";
}
anchors[i].onmouseup = function() {
this.className = "mouseUp";
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
You seem to be guessing at how many parentNodes will get you to the
<body> tag, then based on that, how many will take to get to the <ul>
tag at the start of the list. See below for a more efficient
solution.
if (object.tagName.toUpperCase() == ''BODY''){
A more efficient test here is:
if ( /body/i.test(object.tagName) ){
// top-menu
this.parentNode.childNodes[getIndex()].style.display = ''none'';
}
else if( object1.tagName.toUpperCase() == ''BODY'' ){
// sub-menu
this.parentNode.parentNode.style.display =
''none'';
}
}
anchors[i].onmouseover = function(){
var object = this.parentNode.parentNode.parentNode;
var object1 = object.parentNode.parentNode;
if (object.tagName.toUpperCase() == ''BODY''){
// top-menu
this.parentNode.childNodes[getIndex()].style.display = ''block'';
}
else if(
object.parentNode.parentNode.tagName.toUpperCase() == ''BODY'' ){
// sub-menu
this.parentNode.parentNode.style.display =
''block'';;
}
}
}
}
</script>
脚本的工作方式非常容易失败。你的getIndex（）
函数只适用于标识为Netscape或Microsoft Internet Explorer的浏览器。
您还可以根据您对浏览器的猜测确定节点数量。
看来你想要的是什么做的是找到< ul>在点击的列表的
开头标记。如果是这样的话，最好的方法是找到它是通过parentNodes直到你到达那里。
如果传递了以下函数引用一个节点，它将在DOM树上向上发送一个UL节点，然后返回一个引用
它：
函数getULtag（x）{
while（！/ul/i.test(x.nodeName）&& x.parentNode）{
x = x.parentNode;
}
返回x;
}
下面是一个更简洁版本，但如果x是UL标签则会失败
您之后：
函数getULtag（x）{
while（（x = x.parentNode）&&！/ ul / i.test（x.nodeName））{}
返回x;
}
上述两个函数都适用于任何支持
JavaScript和W3C DOM的浏览器，而不考虑他们选择的任何内容
报告为他们的''appName''（包括IE和Netscape，以及
许多其他人）。
下面是一个示例实现。
< script type =" text / javascript">
函数getULtag（x）{
while（（x = x.parentNode）&& ！/ul/i.test(x.nodeName)) {}
返回x;
}
< / script>
< ul id =" ulA">
< li onclick =" alert（getULtag（this）.id）;"> hi< / li> ;
< li onclick =" alert（getULtag（this）.id）;"> hi< / li>
< li onclick =" alert（getULtag（this）.id）;"> hi< / li>
< li onclick =" alert（getULtag（this）.id）;"> hi< / li>
< / ul>
[...]
-
Rob
The way your script works is very prone to failure. Your getIndex()
function will only ever work with browsers that identify as
''Netscape'' or ''Microsoft Internet Explorer''.
You also make assumptions about the number of nodes based on your
guess of browser.
It seems that what you are trying to do is find the <ul> tag at the
start of the list that was clicked on. If that is so, the best way
to find it is to go up through the parentNodes until you get there.
If the following function is passed a reference to a node, it will go
up the DOM tree until it finds a UL node, then return a reference to
it:
function getULtag(x){
while (!/ul/i.test(x.nodeName) && x.parentNode ){
x = x.parentNode;
}
return x;
}
Below is a more concise version, but it will fail if x is the UL tag
you were after:
function getULtag(x){
while ( (x = x.parentNode) && !/ul/i.test(x.nodeName)){}
return x;
}
Both the above functions will work in any browser supporting
JavaScript and the W3C DOM without regard for whatever they chose to
report as their ''appName'' (which includes IE and Netscape, as well as
many others).
A sample implementation is below.
<script type="text/javascript">
function getULtag(x){
while ( (x = x.parentNode) && !/ul/i.test(x.nodeName)){}
return x;
}
</script>
<ul id="ulA">
<li onclick="alert(getULtag(this).id);">hi</li>
<li onclick="alert(getULtag(this).id);">hi</li>
<li onclick="alert(getULtag(this).id);">hi</li>
<li onclick="alert(getULtag(this).id);">hi</li>
</ul>
[...]
--
Rob
RobG写道：
50 ***@web.de 写道：
< snip>
<snip>
if（object.tagName .toUpperCase（）==''BODY''）{
if (object.tagName.toUpperCase() == ''BODY''){
这里更有效的测试是：
if（/body/i.test(object） .tagName））{
A more efficient test here is:
if ( /body/i.test(object.tagName) ){
< snip>
是吗更有效的测试？您是否阅读了ECMA 262部分
正则表达式并考虑了实施
必须采取的措施？字符串比较并不复杂;也许比较长度
如果它们不匹配则返回false，然后依次比较每个相应的
字符，在第一个不匹配时返回false（等于
在16位整数之间进行测试对于CPU直接进行测试是微不足道的），并且
如果到达字符串末尾而没有返回则返回true
false。
Richard。
<snip>
Is it a more efficient test? Have you read the ECMA 262 section on
Regular Expressions and thought about what it must take to implement
that? String comparison is not that complex; maybe compare the length
and return false if they don''t match, then compare each corresponding
character in turn, returning false at the first non-match (equality
testing between 16 bit integers is trivial for CPUs to do directly), and
return true if you get to the end of the strings without having returned
false.
Richard.
这篇关于烦人的NN / Firefox突出Bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
