0

私はこのjsfiddleにいくつかのボックスを持っています - http://jsfiddle.net/SzDZn/1/ - そして、それらのいずれかをクリックしてもまだ体がアクティブな要素として表示されるのはなぜだろうと思っています:

$('#blue_box').click(function() {
    alert ("active box is " + document.activeElement);
});

ここでの目標は、クリックがボックスの外にあるとき、つまりぼかしイベントのときにボックスを実際に消すことですが、ボックスにフォーカスを当てることさえできません。

ありがとう

4

1 に答える 1

2

要素がフォーカスを受け取るには、入力を受け取ることができる必要があります。あなたの「ボックス」はどれもできないので、クリックされたときにフォーカスがあるとは見なされません。要素に tabindex を設定することでフォーカス要件を回避する方法がいくつかありますが、これは依然として非標準と見なされています。

「選択がない場合、アクティブな要素はページの<body>.」 - Mozilla - activeElement

jsFiddle Demo

その答えはあなたのタイトルに対するものですが、ローカライズされた例に完全には対応していません。あなたの例では、クリックしたときに要素を「アクティブ」にしたい場合は、クラスを指定してください。たとえば、クリックされた各要素にクラス「activeElement」を与えてみましょう。ここで、任意のクリック イベントが登録されると、「activeElement」クラスの要素を削除すると、最後にクリックされたボックスが削除されることがわかります。また、これらのクリック イベントを誤って伝播させたり、間違った要素を削除したりしないようにします。

$('#red_box').click(function(e) {
 e.stopPropagation();
 $('.activeBox').remove();
 $(this).addClass("activeBox");
 alert($(".activeBox")[0].id + " is the active box");
});

$('#green_box').click(function(e) {
 e.stopPropagation();
 $('.activeBox').remove();
 $(this).addClass("activeBox");
 alert($(".activeBox")[0].id + " is the active box");
});

$('#beige_box').click(function(e) {
 e.stopPropagation();
 $('.activeBox').remove();
 $(this).addClass("activeBox");
 alert($(".activeBox")[0].id + " is the active box");
});
于 2013-05-13T22:18:24.143 に答える