jQuery touchstart 与 IE 上的 nicescroll 冲突

Question

我使用此代码在左侧创建菜单，但在 IE 11 上不起作用，仅适用于 Firefox、Chrome、Edge 和所有其他主要浏览器。

你能帮帮我吗？

当我在 IE 11 上使用 class .morph-main-menu-button-wrapper 触摸菜单时，没有显示任何内容。

但是如果我双击这个图标，菜单就会显示出来！

删除所有js代码后问题是nicescrool:

(function($){
$(document).ready(
function() {
$("html").niceScroll({
cursorcolor:        "#40A9F2",
cursorwidth:        "12px",
cursorborder:       "0px solid #000",
cursorborderradius: "3px",
scrollspeed:        90,
autohidemode:       true,
background:         '#ddd',
hidecursordelay:    400,
cursorfixedheight:  false,
cursorminheight:    20,
enablekeyboard:     true,
horizrailenabled:   false,
bouncescroll:       true,
smoothscroll:       true,
iframeautoresize:   true,
emulatetouch:       false,
hwacceleration: true
});
}
);})(jQuery);

nicescroll和touch有冲突怎么用？

jQuery('.morph-main-menu-button-wrapper, .morph-main-menu-activator').on('touchstart touches touchend click', function(e) {
'use strict';
    e.preventDefault();
        if(jQuery('.morph-main-wrapper').hasClass('morph-main-wrapper-active'))
        {       
            /* hide morph slide */
            jQuery('.morph-main-wrapper').removeClass('morph-main-wrapper-active');
            /* hide morph background */
            jQuery('.morph-main-background').removeClass('morph-main-background-active');
            /* hide background overlay */
            jQuery('.morph-background-overlay').removeClass('morph-background-overlay-active');
            /* hide expanded menu button */
            jQuery('.morph-main-menu-button-wrapper').removeClass('morph-menu-active');

            /* when menu de-activated, animate main menu items */
            jQuery('.morph-menu-wrapper').removeClass('morph-menu-wrapper-active');

            /* hide search field close button */
            jQuery('.morph-search-close-wrapper').removeClass('morph-search-close-wrapper-active');
            /* hide search field */
            jQuery('.morph-search-wrapper').removeClass('morph-search-wrapper-active');
            jQuery('.morph-search-wrapper #searchform #s').blur();
            /* show search button */
            jQuery('.morph-search-button').removeClass('morph-search-button-hidden');

            /* hide secondary menu */
            jQuery('.morph-secondary-menu-wrapper').removeClass('morph-secondary-menu-wrapper-active');
            /* secondary menu button inactive state */
            jQuery('.morph-secondary-menu-button').removeClass('morph-secondary-menu-button-active');
        } else {        
            /* show morph slide */
            jQuery('.morph-main-wrapper').addClass('morph-main-wrapper-active');
            /* show morph background */
            jQuery('.morph-main-background').addClass('morph-main-background-active');
            /* show background overlay */
            jQuery('.morph-background-overlay').addClass('morph-background-overlay-active');
            /* hide expanded menu button */
            jQuery('.morph-main-menu-button-wrapper').addClass('morph-menu-active');

            /* when menu activated, animate main menu items */
            jQuery('.morph-menu-wrapper').addClass('morph-menu-wrapper-active');
        }
});

Answer 1

由于未应用样式存在问题，这让我相信您的 CSS 中有某些内容未在 IE 中呈现。您的 javascript 本身看起来不错，应该会触发所有事件。尝试添加触摸以更加安全。

也可以用$来引用jquery，使得

            jQuery('.morph-menu-wrapper').removeClass('morph-menu-wrapper-active');

成为 $('.morph-menu-wrapper').removeClass('morph-menu-wrapper-active');

Answer 2

版本 3.7.3 修复触摸问题！

https://github.com/inuyaksa/jquery.nicescroll/releases

jQuery touchstart 与 IE 上的 nicescroll 冲突

jQuery touchstart conflict with nicescroll on IE

html

mobile

jquery

touch