スクロールボタンのスクロールをキャンセルする方法 – javascript

質問:


エディタのようなものをつくってまして、例えば以下のようなマウスのホイールボタンの押下で要素を動かすようなイベントを作りたいのですが、スクロールバーが出ているときはスクロールが優先されて、要素がうまく動かせません。
何か上手い方法はございませんでしょうか。

コードスニペッド:

var a=document.createElement("div")
a.style.width=a.style.height="100px"
a.style.backgroundColor="blue"
a.style.top="500px"
a.innerHTML = "高さ確保用"

var b=document.createElement("div")
b.style.width=b.style.height="100px"
b.style.backgroundColor="red"
b.innerHTML = "中ボタンドラッグで移動"
a.style.position=b.style.position="absolute"
document.body.appendChild(a)
document.body.appendChild(b)

var drag=false
var preX
var preY
b.addEventListener("mousedown",(e)=>{
    if(e.button==1){
        drag=true
        preX=e.clientX
        preY=e.clientY
    }
})
window.addEventListener("mousemove",(e)=>{
    if(drag){
        b.style.left=(parseInt(b.style.left)||0 )+e.clientX-preX+"px"
        b.style.top=(parseInt(b.style.top ||0))+e.clientY-preY+"px"
        preX=e.clientX
        preY=e.clientY
    }
    
})
window.addEventListener("mouseup",()=>{
    drag=false
})
<html>
  <head><title></title></head>
  <body>
  </body>
</html>
質問者: たわわ

mousedown
デフォルトの動作
ドラッグ/ドロップ操作を開始する、テキスト選択を開始する、(サポートされている場合、中ボタンと組み合わせて)スクロール/パンを開始する等。(MDN web docsより)
デフォルトの動作キャンセルにより問題は解決しました。

出典

Related Posts:

2つあるHTML機能を一つにまとめたいです。 [クローズ済み] – javascript html ajax
質問: 失礼致します。 今それぞれ違う機能をもったHTMLファイル(JS機能含む)があります。 一つはサジェスト機能し検索することができます。2つ目はURL先で表示されているデータをテーブルに変換して表示する機能です。この二つを組み合わせていただけないでしょうか? 前者は検索してページを表示してもJSON形式のため見づらい 後者はテーブルに変換して見やすいがURL先をあらかじめ指定するため応用が利かない。 最終的に検索してテーブル表示させたいです。 画面遷移してもしなくても大丈夫です。 難しい部類に入るかと思いますがJavaScriptに詳しいかた何卒宜しく御願い致します。 初心者のため質問内容で分からない点があるかと思います。修正しますので遠慮なくおっしゃて下さい。 ---HTML--- <body> <form method="get"action="http://localhost:8180/api/stock/search?q=" Accept-charset="UTF-8"> <input type="text" id="ac2" name="car_name" > <input type="submit" value="検索"></form> </body> --javascript-- $(document).ready( function() { $("#ac2").autocomplete({ ...
amazonの価格取得 – javascript php api
質問: 、amazonの個別商品ページのURL(例)http://www.amazon.co.jp/dp/4822242633 を使って、商品価格だけを抜き出す場合、いろいろとやり方はあると思いますが、皆さんならどのように実現されますでしょうか。 教えて頂けますと、幸いです。 ※言語はPHPでお願いいたします。 ※amazon apiはリクエスト制限があるので、amazon api以外でお願いいたします。 ※商品価格とは以下のタグの部分です。 <span class="a-size-medium a-color-price offer-price a-text-normal">¥ 2,376</span> よろしくお願いいたします。 質問者: rei0328 <?php $html = file_get_contents("http://www.amazon.co.jp/dp/4822242633"); $dom = new DOMDocument(); @$dom->loadHTML($html); $xml = simplexml_import_dom($dom); $ret = $xml->xpath('//span[@class="a-size-medium a-color-price offer-price ...
目覚まし音も、“1分”遅れに鳴るのではなく、時間が来たら鳴るようにする方法について – javascript
質問: 下記のソースコードは、デジタルの目覚まし時計の目覚ましをセットして、時間が来るとデジタル時計は消え、目覚まし音とともに"アナログ時計"が現れるように設定したものですが、目覚まし音はアナログ時計が現れて"1分後"に鳴り始めます。セレクトの表示は、アナログ時計が現れるのと同時に切り替わります。どうすれば、目覚まし音も時間通りに切り替わるか、ご教示ください。 なお、音は出ないように設定しています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> ...
デジタル時計は動いていないのに、更新される奇妙な現象 – javascript
質問: 下記のコードは、1分おきに"和暦"と"西暦"に切り替わる『(カレンダー機能付き)デジタル時計』で、 マウスポインターにくっついて来るものです。 しかし、問題があるのです。 デジタル時計は、一分ごとに更新されるのに秒針が動いていないのです。 このデジタル時計を動いている状態にするには、どうすればいいでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> ...
Javascript超初心者です – javascript
質問: 初めまして、質問なんですが サイコロを振り、出た目を2x+5して結果が100以下の場合もう一度2x+5をし、 結果が100を超えたらその結果と何回計算したかを出力しろ という問題なんですがランダムな数字を生成することはできました。 しかしその先で躓いてしまい、中々うまくいきません。 どなたかアドバイスを下さい。 よろしくお願いします。 とりあえず書いてみたソースです。 <html> <head> <meta charset="UTF-8"> </head> <body> <script> function GetRandomNumber() { ...
javascriptに関する質問 – javascript
質問: 以下のようにCMSのようなものを作っているのですが、id="ul"の内部にある「消す」や「追加する」のところだけ、javascriptが効きません。どのようにしたら、動きますでしょうか。 詳しい方、ご教示頂けると幸いです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>記事投稿画面</title> </head> <body> <div ...
angular.jsと競合関係にあるフレームワーク [クローズ済み] – javascript
質問: フロントエンドの勉強をしようと思っていますが、angular.jsを学ぶか、他のものを学ぶか迷っています。 angular.jsと競合関係にあるフレームワークと、できればそのメリットや特徴などを教えていただけると助かります。 質問者: 0xfffffff7 ここにまとまっていると思われるURLを幾つか記載します。 いかにして我々はフロントエンドに秩序をもたらそうとしてきたか JavaScript フレームワーク - ペパボのフロントエンドスタンダード 【JavaScript】なんとか.jsのお話(backbone.js、angular.js、node.js、alt.js、unserscore.js、prototype.js....etc) 出典
javascriptでスロットマシン – javascript
質問: 自分は今、Javascriptでスロットマシンを作っています。 そこで質問なんですが、スタートボタンを連打しますとリールの回転が速くなってしまいます。 回転速度は一定のままにしたいです。 そしてアタリ、ハズレの判定が消えません。 どうしたらよろしいでしょうか。 よろしくお願いします。 Javascript //左リールの制御 function a1() { //aにHTMLから取得した数字を代入 var a=document.getElementById("su1").innerHTML; //文字列のiを数字に変換し1を足してxに代入 var x=parseInt(a)+1; ...
このコードを coffee script に変換していただきたいです – javascript coffeescript
質問: タイトルの通りです。このコードは coffee scriptでどう記述されるのでしょうか。 よろしくお願いいたします。 var app = angular.module('sampleApp', ); function MyController($scope) { $scope.foo = "" $scope.lastSubmitted = "" $scope.submit = function() { ...
Inappbrowserの表示について – javascript monaca html
質問: Inappbrowserを使う際、以下のような実装方法がわかりません。 是非、ご教授頂ければと思います。 ・下層面のヘッダー部分を残した表示方法 ・表示した後、アプリ側で用意したフッターを表示する方法 アプリ内ブラウザである事をユーザに伝えるには、上記のような工夫が不可欠かと思います。 例えば、リンク集の特定サイトをクリックした際、アプリ内ブラウザで表示する際、アプリ内で表示されている事が認識できませんので・・・。 また、Inappbrowserを使った際、location=yesを使うと、かなり見栄えの悪い<>と×が出てしまいます。 これを修正する方法も、ご教示頂けるとたすかります。 出来れば、実例があると助かります。 (どなたかのアプリで実装されていたら、インストールして確認させて頂ければと思います) よろしくお願い致します。 質問者: kenji ご利用されているプランなど、前提条件が分かりませんが2つほど…… InAppBrowserはMonacaが採用しているCordovaプラグインです。 Cordovaプラグインが提供しているUIが目的に沿わないのであればWebViewを表示するプラグインを自身で作るか、 sandbox属性を付与してiframe内で表示するかどちらかです。 アプリにもよると思いますが、 iframeであれば難しいことはありません。 ですが、あまり見知らぬWebページを徘徊させるのは危険です。 念のためsandboxを付けるのが無難かと思います。 プラグインを作成する方ですが、 MonacaでやるならGoldプラン以上のアカウントが必要です。 ……そもそもプラグインを作成できる能力があるのであれば 素直にCordovaで開発することをお勧めします。 追記 ちなみに採用しているcordovaプラグインはこちらになります Monacaのドキュメントはこちらです。 どういったWebページを表示するのか分かりませんが ご自身が管理されているWebページのみを見せるのであれば ツールバーを非表示にしてしまってWebページでUIを作り ハッシュやリクエストを付けてURLをアプリ側で読み取りながら制御することも可能です CordovaはMonacaに比べて更に敷居が高いと思いますし Cordovaプラグインを作成するとなるとJavaやObjective-C or Swift or Swift2の知識も必要です。 時間と手間暇との相談になるかと思いますが、 何を採用、優先して、どのように実現するかを明確にすると詳しくアドバイスなどを求められるかと思います 出典
monaca クイズアプリについて – javascript monaca css
質問: http://matorel.com/archives/754 こちらのサイトも参考にしてクイズアプリを作ったのですが、いざandroidへダウンロードし試してみると、PC上だとできるのですが選択肢のボタンが改行されなくて横に伸びてしまいます。 よって選択肢のボタンが画面外へ行ってしまいます。 どうすればよろしいでしょうか? LGL23を使用しております。 質問者: 田中太郎 実装はGitからプロジェクトをインポートしたのでしょうか? リンクだけではなく問題のコードと、 スクショなどを質問文に記載なさると回答もつきやすいかと思います。 本題ですが、<ons-row>で<ons-col>とボタンを4つ纏めて括っているものを、2つずつで括ってはどうでしょうか? おそらくMETAの記述がリンク先と違うのでons-rowで指定した行が優先されて1行に纏められているものと思われます。 出典
変数の値が増えたか減ったかの判定方法 – javascript swift php
質問: Swiftで実装したいのですがロジックが応用できればどんな言語でも構いません。とある変数の値(数字)が動的に変わるのですが、その変数の値が増えたのか減ったのかで処理を分岐させたいと思っています。コードは下記のような感じです。 if(変数の値が増えた){ print("変数の値が増えた!") }esle if(いや、変数の値が減った){ print("変数の値が減った!") } 実装の方法が思いつきません。アドバイスいただければ幸いです 質問者: ryosuke-hujisawa 変更前の値と変更後の値を配列にとって配列の最初と最後を比較することで解決しました 出典
TODOリストの値がクリアされない、ストップウォッチが表示されない – javascript monaca html
質問: お世話になります。よろしくお願いいたします。 Monacaで日々の運動記録を作ろうと思っています。http://docs.monaca.mobi/cur/ja/sampleapp/samples/todo/ 新規作成し、TODOリストを読み込みました。 そのまま携帯と連携して動作させたところ、 Addした後のデータがクリアされず、 前回の値が保持されたままになってしまっています。 これは、元の提供のデータがおかしいということでしょうか? また、メモ帳とストップウォッチを使い 行った時間を記録していきたいと思っています。http://www.red.oit-net.jp/tatsuya/java/stopw.htm 上記を参考に、HTMLに組み込んでも動きませんでした。 良い勉強サイト等ありませんか? 作ろうとしているものとしては、 TOPぺーじにA,Bの画像2つ、ボタン2つ ボタンをおしたら、それぞれのHTML(A,B)に移動 A,Bそれぞれ、Aの画像とストップウォッチ、Bの画像とストップウォッチがある (カウントダウン形式) 終わったら、リストに結果を保存 TOPページは作れます。 ボタンをおしたらそれぞれのHTMLに移動も可能(なはずです) ストップウォッチの表示がどうにも上手く行きません。 質問者: かろこ MonacaのサンプルのToDo Appのことだと仮定します。 このサンプルはToDoをAddした後に値のクリアをしていないので値が残っています。 Addした後に値をクリアしたい場合は、自分でクリアする処理を実装しましょう。 ストップウォッチの件ですが、せめてソースを提示して頂けないと 何が原因で表示が上手くいっていないのか回答することができません。 出典
どうしてこの状況でjQueryセレクタは効果がない? – javascript jquery
質問: <script> function show_button2(){ $('#demo').html('<button>Button 2</button>'); } </script> <button onclick="show_button2();">Button 1</button> <div id='demo'></div> 'Button 1'をクリックして, 下の'Button ...
ボタンクリック時にコンテンツのトップまでスクロールしたい – javascript jquery
質問: 左上にメニューを作って、特定の項目をクリックしたら、コンテンツのトップまでスクロールしていく内容を作りたいのですが、ボタンを押してもエラーが出てしまい、困っています。ご指摘いただきたいです。 また、簡潔に表示するために提案などがあれば勉強させていただきたいです。 お願いいたします。 左上のボタンを押した際にでたエラーです。 index.html:50 Uncaught TypeError: Cannot read property 'top' of undefined at HTMLSpanElement. (index.html:50) at HTMLSpanElement.dispatch (jquery.js:3) ...

You Might Also Like

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です