htmlモバイル端末長押し画像ポップアップ保存問題について
1762 ワード
html 5プロジェクトをするときは、画像をドラッグする必要がありますが、ユーザーが長時間ポップアップボックスを押さないでください.まず最初に考えたのは、画像をクリックするときにデフォルトのイベントの発生を阻止することです.
js停止泡・
jsデフォルトの動作をブロック
ブリスタ防止
w 3 cの方法はe.stopPropagation()であり、IEはe.cancelBubble=true・
stopPropagationはイベントオブジェクト(Event)の1つの方法でもあり、ターゲット要素のバブルイベントを阻止しますが、デフォルトの動作は阻止されません.バブルイベントとは?ボタンが「click」イベントをバインドしている場合、「click」イベントは親要素で順次トリガーされます.stopPropagationとは、ターゲット要素のイベントが親要素に浸かるのを阻止することです.
デフォルトの動作をブロック
w 3 cの方法はe.preventDefault()であり、IEはe.returnValue=falseを用いる.
preventDefaultイベントオブジェクト(Event)のメソッドで、ターゲット要素のデフォルトの動作をキャンセルします.デフォルトの動作である以上、要素にはデフォルトの動作がキャンセルされる必要があります.要素自体にデフォルトの動作がなければ、呼び出しは無効です.どの要素にデフォルトの動作がありますか?リンクを選択します。Eventオブジェクトのcancelableがfalseの場合、デフォルトの動作がないことを示します。この場合、デフォルトの動作があってもpreventDefaultを呼び出すことはできません。
もう一つ強いreturn false
JAvascriptのreturn falseはデフォルトの動作をブロックするだけでなく、jqueryを使用するとデフォルトの動作をブロックし、オブジェクトのバブルを防止します.
ところで、プロジェクトではどの方法を使っても効果が得られない.仕方なくこのページ構造、imgの外にdivをセットして、imgの上でデフォルトのイベントを阻止して、divをドラッグして動いてピクチャーをドラッグする目的を実現します.しかし、画像のデフォルトイベントをブロックするときはブロックできません.資料を調べて-webkit-touch-callout:noneを見つけました.つまり、ページを長押しするときのポップアップメニューを無効にしますが、プロジェクトでは少しも役に立ちません.そして探してやっとpointer-events:none;ここにはブロガーが書いた紹介がありますhttp://www.cnblogs.com/92cz/p/5787693.html私はもう詳しく話しません.最後にjsを使わずに問題を解決できて嬉しいです.本プロジェクトにはもう一つの解法は画像を背景図にすることですが、プロジェクトはすでにテストしています.比較的簡単で、効果を保証する方法しかありません.
転載先:https://www.cnblogs.com/wangmaoling/p/6408003.html
js停止泡・
function myfn(e){
window.event? window.event.cancelBubble = true : e.stopPropagation(); }
jsデフォルトの動作をブロック
function myfn(e){
window.event? window.event.returnValue = false : e.preventDefault();
}
ブリスタ防止
w 3 cの方法はe.stopPropagation()であり、IEはe.cancelBubble=true・
stopPropagationはイベントオブジェクト(Event)の1つの方法でもあり、ターゲット要素のバブルイベントを阻止しますが、デフォルトの動作は阻止されません.バブルイベントとは?ボタンが「click」イベントをバインドしている場合、「click」イベントは親要素で順次トリガーされます.stopPropagationとは、ターゲット要素のイベントが親要素に浸かるのを阻止することです.
デフォルトの動作をブロック
w 3 cの方法はe.preventDefault()であり、IEはe.returnValue=falseを用いる.
preventDefaultイベントオブジェクト(Event)のメソッドで、ターゲット要素のデフォルトの動作をキャンセルします.デフォルトの動作である以上、要素にはデフォルトの動作がキャンセルされる必要があります.要素自体にデフォルトの動作がなければ、呼び出しは無効です.どの要素にデフォルトの動作がありますか?リンクを選択します。Eventオブジェクトのcancelableがfalseの場合、デフォルトの動作がないことを示します。この場合、デフォルトの動作があってもpreventDefaultを呼び出すことはできません。
もう一つ強いreturn false
JAvascriptのreturn falseはデフォルトの動作をブロックするだけでなく、jqueryを使用するとデフォルトの動作をブロックし、オブジェクトのバブルを防止します.
ところで、プロジェクトではどの方法を使っても効果が得られない.仕方なくこのページ構造、imgの外にdivをセットして、imgの上でデフォルトのイベントを阻止して、divをドラッグして動いてピクチャーをドラッグする目的を実現します.しかし、画像のデフォルトイベントをブロックするときはブロックできません.資料を調べて-webkit-touch-callout:noneを見つけました.つまり、ページを長押しするときのポップアップメニューを無効にしますが、プロジェクトでは少しも役に立ちません.そして探してやっとpointer-events:none;ここにはブロガーが書いた紹介がありますhttp://www.cnblogs.com/92cz/p/5787693.html私はもう詳しく話しません.最後にjsを使わずに問題を解決できて嬉しいです.本プロジェクトにはもう一つの解法は画像を背景図にすることですが、プロジェクトはすでにテストしています.比較的簡単で、効果を保証する方法しかありません.
転載先:https://www.cnblogs.com/wangmaoling/p/6408003.html