0

こんにちは。私の投稿をご覧いただきありがとうございます。私はスクリプト作成に非常に慣れていないので、理解できない単純な問題が発生しています。それで...

ボタンを押すとフリーズするボタンがあり、その「onclick」機能がトリガーされません。これを引き起こしている「onmouseout」機能がありますが、理由はわかりません。

「onmouseout」と「onclick」の機能を1つのボタンに適用したいのですが、機能しません。私のコードを見てください：

Javascript：

function popup() 
{
    alert("Hello World")
}

function pop2() 
{
    alert("Good job")
}

function pop3() 
{
    alert("CLICK ME!")
}

HTML：

<input type="button" onclick="popup()" value="Hello World">
<input type="button" onclick="pop2()" onmouseout="pop3()" value="click me">
4

3 に答える 3

4

コードを調整して、何が起こっているのかを分離して詳細を提供するために、次の準備をしました。

http://jsfiddle.net/238Nz/8/

答えについては、この部分の下をスキップしてください。これはマークを対象としています。

on*属性を使用してハンドラーを追加することが良いか悪いかを無視しましょう$。また、ログを使用して順序を確認しましょう。console.log()ブラウザのJavascriptコンソールにメッセージを送信するために使用しています。FirefoxではFirebugを使用しており、Chromeにはコンソールが組み込まれています。どちらの場合も、ページを右クリックして、これらのテストInspect Elementのタブを選択します。Console

もう1つ、jsFiddleは、最初は理解するのが少し複雑になる可能性があります。左下のペインのJavascriptは、実際にはソース内の（およびタグ）の上のブロック内に配置されます。右クリックして下部の右（）ペインを開くと、ブラウザが何を使用しているかがわかります。これは、jsFiddle用に並べ替えられた独自のサンプルHTMLドキュメントと同じです。ただし、それがどのように機能するかについて混乱しないようにしてください。headinputbodyView SourceResult

問題をテストするために使用しているマークアップは次のとおりです。

<input type="button" onclick="doclick()" onmouseout="domouseout()" value="Click">

関数にわかりやすくラベルを付け、説明的なエラーメッセージを使用していることに注意してください。これは、コードとメッセージログ情報にその詳細を埋め込むことで、何が起こっているかを追跡するのに役立ちます。またはのようなことをするのではなく、常にラベル（、、ログ情報など）を説明するようにしfunctionてvarください。スクリプトが長く複雑になると、それに従うのは非常に困難です。yay!what happened

次に、次の関数を使用して、同じアクションを絞り込み、一貫して複製しました。

function popup(msg) {
    // Note, console.log is first here. This is so that the
    // alert does not "steal" focus before I get any result.
    console.log(msg);

    // Now, let's try the alert. Notice, the same msg is used.
    alert(msg);
}

これにより、両方のイベントハンドラーから、両方を特定の順序でconsole.log 呼び出す ことができます。alert次に、2つのイベントハンドラー関数を確立します。

function doclick() {
    popup('onclick fired');
}

function domouseout() {
    popup('onmouseout fired');
}

ほら、彼らがしているのは、何が起こるはずだったかpopup()についてのアクション固有のログメッセージで呼び出すことだけです。はユーザーに「焦点を合わせ」、インタラクションをブロックするように設計されているため、ブラウザフレームが「フリーズ」した原因の可能性があります。alert

次に行うことは、さまざまなブラウザでこれを試すことです。常に異なるブラウザ間で複製してテストするようにしてください＃。この場合、2つの間に大きな違いがあることに気づきます...

  • Chrome：処理をブロックしません。両方が起動alertし、onmouseout-firedは、とを押してマウスポインタを要素から移動するまで実行さalertれません。これは、望ましい結果のようです。右？console.logOkalert input

  • Firefox（17.0.1）：Firefoxはあなたが説明している動作を表示します。ボタンをクリックすると、両方が表示doclick さ れ、同時にdomouseout()呼び出されることに注意してください。そのため、Firefoxはマウスポインタをボタンから離していると検出し、「フリーズ」します。を見ると、両方がすぐに発砲し、（をクリックして）対話することができないように見えます。onclickconsolelogalertOk

  • IE（7-9、9互換表示）：IEはもちろん興味深い図を提供します。たとえば、IE9のボタンをクリックすると、次のように表示されます。

    onmouseoutアラートはonclickアラートの上にあります???

    http://i.imgur.com/sWXWm.png

    もちろん、これはFirefoxが持っているのと同じ効果のように見えます...しかし、Firefoxの何らかの理由で、onmouseout-firedは-firedalertの上に焦点を合わせていません。IE 7-9と互換表示はすべて、わずかな違いはありますが、この特定の動作を示します。onclickalert

  • Opera（12.02）：Operaは、-firedおよびlogメッセージが完了するまで、-firedまたはメッセージを起動onmouseoutせalertず、マウスを移動します（クリックした後、ボタン要素からマウスを移動したと仮定します）。これは奇妙に思えますが、FirefoxやIEの動作よりも口当たりが良いです。たぶん私は間違っています。console.logonclickalertinput

では、何が起こっているのでしょうか。よくわかりませんが、がユーザーに焦点を合わせるのをonmouseout妨げていると思います。凍結中にヒットすると、アラートは表示されますが、表示されません。Chromeはここでは正しいようです。Firefoxの「ポップアンダー」アラートは、まあ、ちょっと怪しいようです。onclickalert[Enter]onclickonmouseout

要約すると、少なくともこの場合の2つのイベントの動作は、 Firefoxに固有のものではありません。Firefox（少なくとも17.0.1）に固有のように見えるのは、-firedがonmouseout正しくalertフォーカスされておらず、ページが「フリーズしているように見える」という事実です。これはバグのようです。報告されているのかな？

$ 通常、のようなインライン属性イベントハンドラーを使用することはお勧めできませんが、ここでのポイントの横にあるものは無視しましょう。MDNのドキュメント、特にHTML属性のセクションを参照してください。これは、ここで説明するよりも少し注意が必要で詳細です。<input onclick="doclick()"...>DOM Event

＃ ブラウザ内でJavascriptを使い続けると、IEが...特別であることがわかります。これは歴史上特別な場所であるため、IEのバージョンでコードをチェックするときの奇妙なまたは「異常な」動作は珍しいことではありません。個人的には、FirefoxまたはChromeで学習して作業し、IEや他のブラウザーで動作することを確認することをお勧めします。

于 2012-12-27T04:02:24.433 に答える
2

Javascript：

var clicked = false;
function popup() 
{
    alert("Hello World")
}

function pop2(ev) 
{
    alert("Good job");
    clicked=true;
}

function pop3() 
{
    if(clicked == false)
    {
        alert("CLICK ME!");
    }
    clicked=false;
}

HTML：

<input type="button" onclick="popup()" value="Hello World">
<input type="button" onclick="return pop2(event)" onmouseout="pop3()" value="click me">

<ahref = "http://jsfiddle.net/bLuuQ/5/"rel="nofollow">デモへのリンク

于 2012-12-27T03:50:34.017 に答える
1

クリックイベント中のフォーカスが不十分なため、FireFoxではクリックイベントとマウスアウト/マウスリーブイベントがすぐに発生するため、マウスアウト/マウスアウトイベント中に処理されるコードに一種の遅延を追加できます。以下は私のために働いた：

//Bind the element with classname to a function on click event
$(".rej").bind("click", showData);
//Bind the same element with classname to another function on mouseout event.
$(".rej").bind("mouseout", hideData);

次に、showData関数を続行できます。ただし、hideData関数では、以下に示すように、その関数のコードを処理する前に数秒の遅延を追加する必要があります。

function showData() { 
//Do something
}

function hideData() {
var delay = 1000;
setTimeout(function(){
//Do something
}, delay);
}

そして、あなたは行ってもいいです。mouseoutイベントがFirefoxのクリックイベントを圧倒することはなくなりました。:) :)

于 2017-05-04T08:34:33.953 に答える