3

ユーザーが画面上の任意の場所をダブルクリックして、その場所に関するフィードバックを送信できるフォームを表示できるようにしたいと考えています。

私は2つの解決策を考えることができます：

  1. X、Y 座標を格納します。X、Y 座標はすべてのブラウザーでサポートされているわけではないため、これを除外する必要がありました。

  2. Jquery を使用して、html エンティティの完全なリストを次のように dblClick イベントにバインドします。

    $(document).ready(function() {
$("p,label,input,textarea").bind("dblclick", function(e) {
    $("#feedback_form").show();
});

    });

したがって、上記の例では、p、label、input、または textarea がダブルクリックされると、フィードバック フォームが表示されます (簡単にするために、ダブルクリックされたアイテムの ID を渡すコードはこの例には含まれていません)。

したがって、2 は完全ではありませんが、サポートされている html エンティティのリストに関するフィードバックに対してはうまくいくようです。

私が見落としている簡単な解決策はありますか？

また、2 の場合、このフィードバック フォームを利用するにはダブルクリックが最適な方法ですか、それとも他のイベントをお勧めしますか?

4

6 に答える 6

2

ダブルクリックしたときにマウスカーソルの下にあるDOM要素を確認するヒットテスト関数を作成/取得し、コメント/フィードバックテキストを選択した要素のIDに関連付けることができるはずです

これは、すべての DOM 要素に一意の ID があることを前提としています

(そして、ユーザーがこれを実行できることを知っていること!)

于 2009-01-14T02:16:24.833 に答える
2

サイトにコメント可能な場所を設けないことをお勧めしますが、代わりに特定の要素についてコメントできるようにします。たとえば、ブログの場合、各段落をコメントできる要素として使用できます。コード リポジトリの場合は、コードの個々の行にコメントを追加できます。

The Django Book が段落にコメントする方法を見てください。

于 2009-01-14T02:25:54.737 に答える
1

あなたのレイアウトのほとんどが <div> タグと <table> タグを使用していることを願っています。スティーブンが提案したように、各ブロック要素または Web ページの不可欠な部分であるその他の要素 (画像など) に一意の ID を関連付けます。

ブロック/レイアウト要素に関連付けられた onclick イベントを用意して、別のウィンドウまたは JavaScript ポップアップを開き、要素 ID を取得して、ユーザーがフィードバックを送信できるフォームをポップアップに配置します。

また、これらすべての要素に関連付けられた onmouseover もお勧めします。これは、ユーザーがそのレイアウト ウィジェット/要素についてフィードバックを残すことができることを示すツールチップを表示します。

于 2009-01-14T02:49:50.850 に答える
0

次のようなことができます。

コメントを付けたいブロックには、「コメント可能」のクラスがあり、ID があります。
以下のスクリプトは、W3C 準拠のブラウザーで機能する概要です。つまり、attachEvent とグローバル イベント オブジェクトを使用する必要があります。
イベントの伝播はキャンセルされないため、コメント可能なブロック内のコメント可能なブロックはそれぞれ 1 回イベントを発生させます。
イベントのデフォルト アクションもキャンセルされないため、ダブルクリックされたテキストは引き続き強調表示されます。おそらく、ダイアログに「クリック エスケープしてキャンセル」アクションを含めることができますか?

function CommentDialog() {
    //this is a fake CommentDialog object constructor
    this.display = function( id ) {
        alert( 'you want to comment on the block with id: '+id+', which is outlined in red' );
    } 
}



window.addEventListener( 'dblclick', function(e){ 
    var target = e.target;
    while( /commentable/.test( target.className ) == false ) {
        // if we've hit the body tag then bomb out
        if( target == document.body ) {
            return;
        }
        target = target.parentNode;
    }
    target.style.border = '1px solid red';
    var cmt = new CommentDialog();
    cmt.display( target.id );
 }, false );
于 2009-01-14T09:46:34.427 に答える
0

私は2番目のソリューションが好きですが、関数を一部のhtmlエンティティではなく、次のような明確に定義されたdivにアタッチします。

$(document).ready(function() {
    $("div .commentable").each().bind("dblclick", function(e) {
        $("#feedback_form").show();
});
});

したがって、コメント可能にしたいすべての要素をラップするだけです<div class="commentable"> .. </div>

最初の解決策では、特定の要素だけでなく、ページのあらゆる場所でフィードバックが必要な場合は、JQuery が役立ちます。

jQuery(document).ready(function(){
   $().click(function(e){
      alert(e.pageX +', '+ e.pageY);
   }); 
})

詳細については、JQuery のドキュメントを参照してください。

于 2009-01-15T11:31:38.550 に答える
0

ほとんどのブラウザーでは、単語をダブルクリックして選択できるため、ダブルクリックはよくありません。

代わりに、クリックしてフィードバックを送信できるページ上の特別な場所が必要です。良い例については、Soviut's answer を参照してください。

于 2009-01-14T07:51:42.410 に答える