diff --git a/js/utils/gestures.js b/js/utils/gestures.js index 2cedc759ea..c4fab1c2cd 100644 --- a/js/utils/gestures.js +++ b/js/utils/gestures.js @@ -22,23 +22,11 @@ // default settings ionic.Gestures.defaults = { - // add styles and attributes to the element to prevent the browser from doing - // its native behavior. this doesnt prevent the scrolling, but cancels - // the contextmenu, tap highlighting etc + // add css to the element to prevent the browser from doing + // its native behavior. this doesnt prevent the scrolling, + // but cancels the contextmenu, tap highlighting etc // set to false to disable this - stop_browser_behavior: { - // this also triggers onselectstart=false for IE - userSelect: 'none', - // this makes the element blocking in IE10 >, you could experiment with the value - // see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241 - touchAction: 'none', - touchCallout: 'none', - contentZooming: 'none', - userDrag: 'none', - tapHighlightColor: 'rgba(0,0,0,0)' - } - - // more settings are defined per gesture at gestures.js + stop_browser_behavior: 'disable-user-behavior' }; // detect touchevents @@ -704,37 +692,16 @@ /** - * stop browser default behavior with css props + * stop browser default behavior with css class * @param {HtmlElement} element - * @param {Object} css_props + * @param {Object} css_class */ - stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) { - var prop, - vendors = ['webkit','khtml','moz','Moz','ms','o','']; - - if(!css_props || !element.style) { - return; - } - - // with css properties for modern browsers - for(var i = 0; i < vendors.length; i++) { - for(var p in css_props) { - if(css_props.hasOwnProperty(p)) { - prop = p; - - // vender prefix at the property - if(vendors[i]) { - prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1); - } - - // set the style - element.style[prop] = css_props[p]; - } - } - } - - // also the disable onselectstart - if(css_props.userSelect == 'none') { + stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_class) { + // changed from making many style changes to just adding a preset classname + // less DOM manipulations, less code, and easier to control in the CSS side of things + // hammer.js doesn't come with CSS, but ionic does, which is why we prefer this method + if(element && element.classList) { + element.classList.add(css_class); element.onselectstart = function() { return false; }; diff --git a/scss/_util.scss b/scss/_util.scss index 40472910ef..28ef73872c 100644 --- a/scss/_util.scss +++ b/scss/_util.scss @@ -38,6 +38,31 @@ pointer-events: auto; } +.disable-user-behavior { + // used to prevent the browser from doing its native behavior. this doesnt + // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -ms-touch-action: none; + touch-action: none; + + -webkit-touch-callout: none; + touch-callout: none; + + -ms-content-zooming: none; + content-zooming: none; + + -webkit-user-drag: none; + user-drag: none; + + -webkit-tap-highlight-color: rgba(0,0,0,0); + tap-highlight-color: rgba(0,0,0,0); +} + .block { display: block; clear: both;