1

我在 Mac OS X 10.8.5 上使用 Chrome(版本 30.0.1599.101)在演示模式下使用启用触摸屏的电视,突然间我的 div 变得可拖动。我们没有通过 jquery 或 HTML5 规范启用拖放功能,但不知何故,我们能够拖动我们的 div 并将它们放置在屏幕上的任何位置。我们可以旋转和调整它们的大小。当我们刷新页面时,这个功能就停止了。任何想法这是怎么可能的?

我们之前从开发工具中启用了“模拟触摸事件”,但是当这个功能出现时,开发工具没有打开。此外,我们已经安装然后卸载了 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 回答