1

我正在尝试在按钮中显示/隐藏一些文本。按钮是

<button id="SOS" onmouseover="show()" onmouseout="hide();">
    <p>S.O.S</p>
    <div id="sos_left"> <?=$text_to_show_hide?></div>
</button>

和javascript代码是

<script type="text/javascript">
function show()
    {
        sos_left=document.getElementById('sos_left');
         alert("mouseover");
         sos_left.style.color = "red";
         sos_left.style.fontSize = "28";

    }
function hide(){

       sos_left=document.getElementById('sos_left');
       alert("mouseout");
       sos_left.style.color = "blue";
       sos_left.style.fontSize = "0";
}
</script>

问题是即使我将鼠标悬停在鼠标上也会发出警报。

注意：我不能使用 jquery，因为该站点是基于 vbulletin 的，并且我在其中一个模板上使用了此代码。

4

3 回答 3

3

问题是事件冒泡mouseover，mouseout这意味着当您的光标进入和退出作为按钮后代的元素时，按钮上定义的事件侦听器也会被触发。

您可以做的是检查生成事件的元素是否实际上是<button>元素。像这样修复 DOM：

<button id="SOS" onmouseover="show(event)" onmouseout="hide(event);">...

然后你的JS代码：

function show(e) {
    if ((e.target || e.srcElement).id !== "SOS") return;
    ...

function hide(e) {
    var tgt = e.target || e.srcElement;
    if (tgt.id !== "SOS") return;
    // If the cursor enter in one of the descendants, mouseout is fired, but
    // we don't want to handle this
    if (tgt.contains) {
        if (tgt.contains(e.relatedTarget || e.toElement)) return;
    } else if (this.compareDocumentPosition)
        if (tgt.compareDocumentPosition(e.relatedTarget)
                & Node.DOCUMENT_POSITION_CONTAINS) return;
    ...

在 Internet Explorer 中（现在也在 Opera 中）有这些事件mouseenter，mouseleave它们的行为非常相似，但不会冒泡。对于其他浏览器，它们在 jQuery 等通用框架中进行模拟。

最后一点，我建议您使用比传统方法更现代的方法来附加事件侦听器。另外，您定义的方式sos_left意味着它成为一个全局变量。var在定义前面使用关键字。

于 2012-06-10T08:19:25.323 回答
0

你什么都不藏。。

用于display:none“删除”元素或visibility:hidden隐藏元素。

要“重新添加”元素，请使用display: block或visibility:visible，如果您使用了可见性属性来隐藏。

尝试两者以查看差异。

另一个问题是，

您尝试将其sos_left用作变量，但您没有将其声明为变量。

使用var sos_left代替。

于 2012-06-10T07:56:45.870 回答
0

那是因为您将事件应用于divnot button。尝试这个：

sos_button=document.getElementById('SOS');
于 2012-06-10T08:09:50.453 回答