2016-05-13 26 views
1

我正在使用AngularJs網絡應用程序,並剛開始使用ngTouch來識別左右滑動,我想用它打開和關閉我的側欄菜單。目前它的工作原理和菜單打開和關閉,然而,我的滑動事件綁定到整個包裝,就像<div ng-style="body_style" id="wrapper" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()">這使得整個應用程序的滑動區域。我希望能夠將其設置爲只是一個區域中,像這樣的應用程序的左上角象限: ideal touch area is in red使用ngTouch定義觸摸事件的區域

這將讓我設置了附加功能等刷卡區域,而不是侷限於一個區。

我知道我可以製作一個div並將其放置在那裏,但是div會阻止其他區域的內容,這樣當有人去「點擊」某物時,他們實際上會點擊不可見的div爲滑動區域。我知道必須有解決辦法,但我想不出一個。

tldr:如何設置一個區域來捕捉不會影響其他可能位於其下的元素的交互性的滑動事件?

回答

1

在angular-touch的源代碼中,它使用了一個名爲bind的函數。綁定需要一個應該被監視的元素,並觀察它的事件,比如開始。所以如果你想,你可以改變源代碼來停止執行代碼的其餘部分,如果啓動超出了你設置的某個x或y座標。

你可以更改此代碼,

pointerTypes = pointerTypes || ['mouse', 'touch']; 
element.on(getEvents(pointerTypes, 'start'), function(event) { 
    startCoords = getCoordinates(event); 
    active = true; 
    totalX = 0; 
    totalY = 0; 
    lastPos = startCoords; 
    eventHandlers['start'] && eventHandlers['start'](startCoords, event); 
}); 

爲了這樣的事情:

pointerTypes = pointerTypes || ['mouse', 'touch']; 
element.on(getEvents(pointerTypes, 'start'), function(event) { 
    startCoords = getCoordinates(event); 
    if (startCoords.y <= 400 && startCoords.y >= 100 && startCoords.x <=500) { 
     active = true; 
     totalX = 0; 
     totalY = 0; 
     lastPos = startCoords; 
     eventHandlers['start'] && eventHandlers['start'](startCoords, event); 
    } 
}); 

一個醜陋的黑客攻擊的一種,但它會工作。