web-dev-qa-db-ja.com

要素が無効になっているときにonmouseoverイベントを発生させる

ユーザーが編集権限を持っていない場合に無効にする必要のあるコントロールがいくつかありますが、選択したオプション要素のテキスト全体を表示するのに十分な幅がない場合があります。その場合、ASP.NETと次のコードでツールチップを追加しました

ddl.Attributes.Add("onmouseover", "this.title=this.options[this.selectedIndex].title")

これは、コントロールが有効になっている場合は機能しますが、無効になっている場合は機能しません。

次のアラートは、マウスが選択要素の上にある場合は発生しません。

<select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
</select>

これを参照してください fiddle 。

[〜＃〜] q [〜＃〜]：コントロールのonmouseoverイベントを発生させることはできますかそれはdisabled？です

htmlasp.netvb.netdom-eventsonmouseover
12
KyleMit

無効にされた要素はイベントを発生させません。ユーザーは、それらにカーソルを合わせたりクリックしたりして、ポップオーバー（またはツールチップ）をトリガーすることはできません。ただし、無効にされた要素をDIVでラップし、代わりにその要素で発生したイベントをリッスンすることができます。

24
Diodeus - James MacFarlane

更新：このアプローチの重大な制限については、 nathan williamのコメント を参照してください。問題のある領域をより明確に示すために、フィドルを更新しました。

@ Diodeus の内容を拡張すると、jQueryを使用して、divコンテナを自動的に作成できます。無効になっている要素をラップします。

  1. _:disabled_ セレクターを使用して、無効になっているすべての要素を検索します。
  2. 次に、関数コールバックを使用して .wrap() メソッドを呼び出します
  3. thisを使用して、セット内の現在の要素を参照できます。
  4. 次に、 .attr() メソッドを使用して親要素からonmouseover値を取得し、同じ値を新しいdivに適用します。
_$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});
_

jsFiddleのデモ

10
KyleMit

これが古い投稿であることは知っていますが、chromeではcssプロパティpointer-eventsをすべてに設定でき、イベントを許可する必要があります。他のブラウザではチェックインしていません。

button[disabled] {
  pointer-events: all;
}

編集：

実際には、プロパティをautoに設定するだけで十分だと思います。 @KyleMitがコメントしたように、それはかなり良いことをサポートします。

いくつかの検証ルールが満たされるまでボタンを無効にする必要があるプロジェクトでこれを使用しましたが、ボタンにカーソルを合わせると検証をトリガーする必要もありました。したがって、ポインタイベントを追加することでうまくいきました。 OPに記載されている問題を解決する最も簡単な方法だと思います。

3
Andres Zapata

これが古い投稿であることは知っていますが、この回答によって@Diodeus回答を実装する方法が明らかになることを願っています。

無効にされた要素はイベントを発生させません。ユーザーは、それらにカーソルを合わせたりクリックしたりして、ポップオーバー（またはツールチップ）をトリガーすることはできません。ただし、回避策として、無効になっている要素を<DIV>または<span>で囲み、代わりにその要素で発生したイベントをリッスンすることができます。

注意！ラッパーでonmouseoverとonmouseoutを使用すると<DIV>はChrome（v69）では期待どおりに機能しません。ただしIEでは機能します。そのため、代わりにonmouseenterとonmouseleaveを使用することをお勧めします。これは、IEとChromeの両方でうまく機能します。

   <select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
  </select>

  <div onmouseenter="alert('hi');">
    <select disabled="disabled" onmouseover="alert('hi');">
      <option>Disabled with wrapper</option>
    </select>
  </div>

ここにいくつかの例を含むJSフィドルをまとめました： http://jsfiddle.net/Dr4co/tg6134ju/

1
Dr4co

ターゲット要素にタイトルを追加できないのはなぜですか？タイトルはツールチップと同じように見えます。また、タイトルは無効な要素で機能します。

selectの値を設定するときは、タイトルも設定します。

element.value=value;
element.title = element.options[element.selectedIndex].text;
1
Justin

これには2つの解決策があります

<Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

または、ビューを見逃したくない場合はこれ

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

参照

0
Mina Fawzy