web-dev-qa-db-ja.com

ボタンはモバイルデバイスでは機能しませんが、PCでは機能しますbootstrap

内部にリンクがあるbootstrapボタンを作成しました。これは次のようになります：

enter image description here

カーソルを合わせると：

enter image description here

これはボタン内のコードです：

 <div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>

ログアウトボタン：

<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>

このボタンは、PC（IE、SAFARI、FireFox、Chrome、Opera）ブラウザーで正常に機能します（管理ページに移動しますが、モバイルデバイスでは機能しません。

ログアウトボタンについても同じことを行いましたが、PCおよびモバイルデバイスで正常に動作します。私は今困惑しています。

javascriptjqueryhtmlcsstwitter-bootstrap-3
7
kya

問題は、モバイルデバイスで登録されないonClickイベントを使用していることである可能性があります（クリックしない-タップするため）。

この回答は、モバイルで機能する「touchstart」イベントの使用方法を説明しています。

https://stackoverflow.com/a/22015946/2619909

10
Git Paul

これは奇妙な答えかもしれません。ただし、次のスタイルを指定しないと、モバイルクリックイベントが機能しない場合があります。cursor：pointer;ボタンに。

モバイルのclickEventの処理方法は大きく異なります。最初の「クリック」または「タップ」は、探しているクリックではなく、ホバーとして解釈される場合があります。

ボタンのCSSスタイルを次のように設定してみてください：cursor：pointer;

3
noa-dev

残念ながらcursor:pointer;の設定もtouchstartイベントリスナーの追加も

$(document).ready(function() {
  $('#button_id').on('click touchstart', function() {
    window.location.href = "/url";
  });
});

@ noa-devと@GitPaulsが提案したように私のために働いた。参考までに、私は自分の電話7（ios11.4およびsafari）でテストしました

実用的な解決策：ボタンのz-indexに大きな正の数を設定すると、ボタンが機能するようになります。

#button_id{
  z-index: 99;
}

ダニエルアクリーのおかげで解決策が見つかりましたhttps://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone 。これがすべてのiphone /モバイルデバイスに一般化するかどうかはわかりません。

1
JSMorgan