在特定视图中禁用抽屉的滑动打开

Posted 2023-05-07

【中文标题】在特定视图中禁用抽屉的滑动打开

【英文标题】：Disable swipe-to-open for Drawer in specific view

【发布时间】：2013-09-10 15:14:28

【问题描述】：

我正在使用 Kendo Mobile 开发一个 Web 应用程序，并将 Drawer 小部件用作菜单。我的一个观点是谷歌地图，我想在这个视图中禁用 Kendo Mobile 抽屉的滑动打开功能，原因很明显......

我尝试了以下方法：

绑定到抽屉的 beforeShow 事件

...如果当前视图是地图视图，则阻止它打开

    beforeShow: function (beforeShowEvt) 
        if(app.view().id == "#stationMap") 
            beforeShowEvt.preventDefault();
        
    

问题在于，当我单击顶部栏中的菜单按钮时，它也会触发（并阻止抽屉打开）。

我查看了 beforeShowEvt，但似乎找不到任何东西可以让我知道它是否是通过菜单点击滑动触发的。

绑定到包含 div 的谷歌地图

...并捕获 touchstart 事件以阻止它们传播并被 Kendo 拾取。

这根本不起作用。

【参考方案1】：

这是我解决问题的方法：

向 Google 地图的 dragstart 事件添加了一个事件处理程序，将标志设置为 true

为抽屉按钮的 touchstart 事件添加了一个事件处理程序，该事件将此标志设置为 false

在 Drawer 的 beforeShow 事件中添加了检查 flag 是否为 true，如果是 I preventDefault();

像魅力一样工作！

【讨论】：

在谷歌地图视图中：google.maps.event.addListener(map, 'dragstart', function() setDragFlag(true); ); 在菜单按钮的 touchstart 事件中：$("a#drawerButton").bind("touchstart", function () setDragFlag(false); ); 在抽屉的 beforeShow 事件中：if(viewId == "#mapView" && isDragFlag()) beforeShowEvt.preventDefault(); return;

【参考方案2】：

我知道这不是真正的答案，但我有一个解决办法。只需创建一个新的 .html 文件并将您的 google 小部件放入其中，然后像这样调用它：

app.navigate("nodrawerwidgets.html");

或

<a href="nodrawerwidgets.html">Google widget<a>

我的第一个想法是通过将小部件包装在 div 中来拦截滑动操作：

    <div id="divStopSwipe">

...

$("#divStopSwipe").kendoTouch(
  enableSwipe: true,
  swipe: function (e)  //do nothing or figure out how to let the action pass down to the widget
  
);

..但是这会阻止 google 小部件获取滑动操作。

希望这会有所帮助 - 我也是移动 ui 的新手。