Question

我正在尝试在按钮中显示/隐藏某些的文字。按钮是

<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的，我在其中一个模板上使用此代码。

Answer 1

问题是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。

Answer 2

你不隐瞒什么......

使用display:none来“移除”元素，或使用visibility:hidden隐藏元素。

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

尝试两者，看看差异。

另一个问题是，

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

使用var sos_left代替。

Answer 3

那是因为您将事件应用于div而不是button。试试这个：

sos_button=document.getElementById('SOS');

javascript onmouseout也适用于鼠标悬停

3 个答案: