1

Mac OS X 10.8.5 で Chrome (バージョン 30.0.1599.101) をプレゼンテーション モードでタッチ スクリーン対応テレビで遊んでいたところ、突然 div がドラッグ可能になりました。jquery や HTML5 仕様を介してドラッグ アンド ドロップ機能を有効にしていませんでしたが、何とか div をドラッグして画面上の任意の場所に配置することができました。それらを回転させてサイズを変更できます。ページを更新すると、この機能は停止しました。これがどのように可能になったかについてのアイデアはありますか?

以前に Dev Tools から「Emulate Touch Events」を有効にしていましたが、この機能が表示されたときに Dev Tools は開いていませんでした。また、Chrome MuliTouch 拡張機能をインストールしてからアンインストールしました。

編集

ページの HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
      <title>ArcSite Demonstration</title>
      <meta content='Arcsite' name='description'>
        <link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.accordion.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.menu.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.autocomplete.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.button.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.resizable.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.dialog.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.progressbar.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.selectable.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.slider.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.spinner.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.tabs.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.tooltip.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.base.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery.ui.all.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jqplot.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/open_layers/style.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/a_maps_layout.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/alerts.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/companies.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/factory_details.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/home.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/jquery-ui-timepicker-addon.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/locations.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/tags.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/tracked_points.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <link href="/assets/workers.css?body=1" media="all" rel="stylesheet" type="text/css" />
        <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
        <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
        <script src="/assets/openlayers/OpenLayers.js?body=1" type="text/javascript"></script>
        <script src="/assets/openlayers-rails.js?body=1" type="text/javascript"></script>
        <script src="/assets/unity/UnityObject2.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.accordion.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.button.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.draggable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.resizable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.dialog.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.droppable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-blind.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-bounce.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-clip.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-drop.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-explode.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-fade.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-fold.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-highlight.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-pulsate.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-scale.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-shake.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-slide.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.effect-transfer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.progressbar.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.selectable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.slider.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.spinner.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.tabs.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.tooltip.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery.ui.all.js?body=1" type="text/javascript"></script>
        <script src="/assets/jquery-ui-timepicker-addon.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/index.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/jquery.jqplot.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/excanvas.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/pieRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/barRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/categoryAxisRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/canvasAxisLabelRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/jqplot/plugins/canvasTextRenderer.js?body=1" type="text/javascript"></script>
        <script src="/assets/private_pub.js?body=1" type="text/javascript"></script>
        <script src="/assets/alerts.js?body=1" type="text/javascript"></script>
        <script src="/assets/companies.js?body=1" type="text/javascript"></script>
        <script src="/assets/factories.js?body=1" type="text/javascript"></script>
        <script src="/assets/home.js?body=1" type="text/javascript"></script>
        <script src="/assets/hr_dept.js?body=1" type="text/javascript"></script>
        <script src="/assets/location_import.js?body=1" type="text/javascript"></script>
        <script src="/assets/locations.js?body=1" type="text/javascript"></script>
        <script src="/assets/tags.js?body=1" type="text/javascript"></script>
        <script src="/assets/tracked_points.js?body=1" type="text/javascript"></script>
        <script src="/assets/workers.js?body=1" type="text/javascript"></script>
        <script src="/assets/zones.js?body=1" type="text/javascript"></script>
        <script src="/assets/application.js?body=1" type="text/javascript"></script>
        <meta content="authenticity_token" name="csrf-param" />
        <meta content="vjtlRmIWqfBpHsTVEXKo85CwMsnzVJWmk3KBAg0WNRw=" name="csrf-token" />

      </meta>
    </meta>
  </head>
  <body class='home model'>
    <div class='navbar navbar-fixed-top'>
      <nav class='navbar-inner'>
        <div class='container'>
          <a href="/home/model" class="brand">Arcsite</a>
          <ul class='nav'>
            <li><a href="/companies">Companies</a></li>
            <li><a href="/workers">Workers</a></li>
            <li><a href="/locations">Locations</a></li>
            <li><a href="/certificates">Certificates</a></li>
            <li><a href="/tags">Tags</a></li>
            <li>
              <a href="/users/sign_out" data-method="delete" rel="nofollow">Logout</a>
            </li>
            <li>
              <a href="/users/edit">Edit account</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div id='main' role='main'>
      <div class='container'>
        <div id='demo_page_header'></div>
        <div class='content'>
          <div class='row'>
            <div class='span12'>

              <div class='row'>
                <div class='span' dispay='none' id='demo_flag'></div>
                <div class='span12'>
                  <script type="text/javascript">PrivatePub.sign({"server":"http://localhost:9292/faye/faye","timestamp":1383923315163,"channel":"/tracked_points/new","signature":"d50b7a8ef6ee1a3e65a1c6835f88c173b15cca2a"});</script>
                  <script type="text/javascript">PrivatePub.sign({"server":"http://localhost:9292/faye/faye","timestamp":1383923315163,"channel":"/tracked_points/group","signature":"d0f6e25ed08577bdcafbe2b5c36deff8fcb488d5"});</script>
                </div>
              </div>
              <div class='row'>
                <div class='span9'>
                  <div class='box' id='tabs-1'>
<div id='zoom_to_extent'>
                      <img alt="Reset-icon" src="/assets/reset-icon.png" />
                    </div>
                    <!-- /#replay_mode{ replay: 'off'} -->
                    <!-- /  replay mode -->
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-long-container'>
                    <div class='demo-widget-label'>
                      <h3>
                        <div id='muster_list_label'>
                          Muster List
                        </div>
                      </h3>
                    </div>
                    <div class='demo-list-container'>
                      <div id='chkbox'>
                        <input id="ml_sort_by_company" name="ml_sort_by_company" type="checkbox" value="1" />
                        Sort by Company
                      </div>
                      <div id='muster_list'></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Asset Profile</h3>
                    </div>
                    <div id='demo_info_box'></div>
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Widget 2</h3>
                    </div>
                    <div id='demo_info_box2'></div>
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Zone Analytics</h3>
                    </div>
                    <div id='demo_info_box3'>
                      <div id='time_in_zones_pie_chart'></div>
                    </div>
                  </div>
                </div>
                <div class='span3'>
                  <div class='demo-widget-container'>
                    <div class='demo-widget-label'>
                      <h3>Your Current Location</h3>
                    </div>
                    <div id='user_current_location'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footer></footer>
        </div>
      </div>
      <!-- ! end of .container -->
    </div>
    <!-- ! end of #main -->
  </body>
</html>
4

1 に答える 1

2

これは、タッチ イベント モードでのブラウザのデフォルトの動作です。ドラッグ アンド ドロップ機能が不要な場合は、オフにしてください。

document.addEventListener('touchstart', function(event) {e.preventDefault()}, true)

また

タッチ イベント モードをオフにします。タッチイベント「フェーズ」の後もクリックが機能するため:)

于 2013-11-05T08:59:32.923 に答える