5

私は非常に紛らわしい問題を抱えており、誰かがそれに光を当てることができるかどうか疑問に思っていました。

私はDIV要素を持っています...

<div onmouseout="scrollRight();" onmouseover="scrollLeft();" id="rightScrollRegion" class="ScrollRegion"></div>

そして、次のような外部スクリプトファイル...

function scrollLeft(){
        document.getElementById('rightScrollRegion').style.background = "#0000ff";
    }

    function scrollRight(){
        document.getElementById('rightScrollRegion').style.background = "#ff0000";
    }

問題は、マウスオーバーが関数scrollLeft（）を呼び出していないように見えることです。またはscrollRight（）; どこでミスしたのかわからないようです。

私はそれが関数に何かがあるかどうかを確認するためにいくつかのテストを行いました...

window.onload = function（）{

scrollLeft();

}

外部ファイルで動作し、ページが読み込まれるときにDIVの背景を変更します...関数が動作します。

また、マウスオーバーで呼ばれるものを変更してみました...

<div onmouseover="alert('Hello');" id="rightScrollRegion" class="ScrollRegion"></div>

アラートウィンドウを正常に印刷します。

だから、マウスオーバーを使って背景を変更できないのではないかと思ったので、試してみました...

<div onmouseover="this.style.background = '#0000ff'" id="rightScrollRegion" class="ScrollRegion"></div>

そして、それは期待通りに背景を変えます。

しかし、何らかの理由で、関数をDIVでトリガーすることができません。私はインターネット全体を検索しましたが、問題の解決策を見つけることができませんでした。何が間違っているのかわからないようです。他のサイトで外部機能を使用したことがありますが、マウスオーバーを使用したことがないため、何が問題になるのかわかりません。

どんな助けでも大歓迎です。

4

4 に答える 4

6

これを試して：

element = document.getElementById('rightScrollRegion');
element.addEventListener("mouseover",function(){
    this.style.background = "#0000ff";
});
element.addEventListener("mouseout",function(){
    this.style.background = "#ff0000";
});

インラインイベントハンドラーの使用は避けてください。このメソッドを使用して、addEventListenerイベントリスナーを要素にアタッチします。

ここでこれを試すことができます：http：//jsfiddle.net/gkvq8/

于 2012-11-17T18:36:25.660 に答える
2

関数は元の関数javascriptとは反対なので、次のように関数名を変更します。

<div language="javascript" onmouseout="funcTwo()" onmouseover="funcOne()" id="rightScrollRegion" class="ScrollRegion"></div>

この

function funcOne(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#0000ff";
    }
    function funcTwo(){
        document.getElementById('rightScrollRegion').style.backgroundColor = "#ff0000";
    }
于 2012-11-17T18:32:03.170 に答える
2

あなたはこれを試すことができます：

HTML要素は次のとおりです。

<button onmouseover="mousein(event)" onmouseout="mouseout(event)">hello</button>

および機能：

function mousein(event){
    event.target.style.background="#FF0000";
}

function mouseout(event){
    event.target.style.background="#FFFFFF";
}

'event'オブジェクトを使用して要素にアクセスする必要があります。これを行うためのより良い方法があります。「控えめな」JavaScriptについて調査する必要があります。ここ

于 2012-11-17T18:53:44.423 に答える
1

可能であれば、 jQueryを使用してください。それはあなたの人生をずっと楽にし、あなたのコードをずっと柔軟にします。

jQueryライブラリを使用するには、HMTLにこれを含めるだけです。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

このようなことはします：

$('div').mouseover(function() {
    $('div#rightScrollRegion').attr("style","background-color:#0000ff;");
});

$('div').mouseout(function() {
    $('div#rightScrollRegion').attr("style","background-color:#ff0000;");
});

理想的には、divの背景色を使用addClassしremoveClassて変更しますが、これは単純なソリューションの例にすぎません。

于 2012-11-17T18:32:47.830 に答える