解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

     在做一个Phonegap+Jqm工程的时候，出现了如题的问题，相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题，fixed却并不能真正fixed,如果想将header和footer真正固定住，还是很麻烦的。起初是想通过监听body的click事件，覆盖jquerymobile默认的click让header和footer能够真正固定下来，不会因为点击body而出现隐藏和出现的问题，但是设想是美好的，结果是残酷的，我在电脑的chrome浏览器上能够正常的取消jqm的默认单击隐藏header和footer的事件，可是一放到手机上就发现完全不是那么回事，通过e.preventDefault(),return false ,e.stopPropgation()等都不能阻止jqm的默认事件的触发。时间紧急，我就只能变通了，通过观察单击时候header和footer的样式区别来发现蛛丝马迹，最后发现是这些样式来实现了header和footer的渐入渐出，通过禁用其过度效果来阻止header的显示和隐藏，最终达到效果，代码如下：

     

 

 

/*Solve Jquery mobile header show and hide when click the long body*/

.in  {

     /*-webkit-animation-timing-function: ease-out;

    -webkit-animation-duration: 350ms;

    -moz-animation-timing-function: ease-out;

    -moz-animation-duration: 350ms;

    animation-timing-function: ease-out;

    animation-duration: 350ms;*/

     -webkit-animation-timing-function :  none ;

     -webkit-animation-duration :  0 ;

     -moz-animation-timing-function :  none ;

     -moz-animation-duration :  0 ;

     animation-timing-function :  ease-out ;

     animation-duration :  0 ;

}

 

.out  {

     -webkit-animation-timing-function :  ease-in ;

     -webkit-animation-duration :  0 ;

     -moz-animation-timing-function :  ease-in ;

     -moz-animation-duration :  0 ;

     animation-timing-function :  ease-in ;

     animation-duration :  0 ;

}

 

 

 

 

.slidedown.in , .slideup.in  {

     /*-webkit-transform: translateY(0);

    -webkit-animation-name: slideinfromtop;

    -webkit-animation-duration: 250ms;

    -moz-transform: translateY(0);

    -moz-animation-name: slideinfromtop;

    -moz-animation-duration: 250ms;*/

     -webkit-transform :  none ;

     -webkit-animation-name :  none ;

     -webkit-animation-duration :  0ms ;

     -moz-transform :  none ;

     -moz-animation-name :  none ;

     -moz-animation-duration :  0ms ;

}

 

 

.slidedown.out , .slideup.out  {

     /*-webkit-animation-name: fadeout;

    -webkit-animation-duration: 100ms;

    -moz-animation-name: fadeout;

    -moz-animation-duration: 100ms;

    animation-name: fadeout;

    animation-duration: 100ms;*/

     -webkit-animation-name :  none ;

     -webkit-animation-duration :  0ms ;

     -moz-animation-name :  none ;

     -moz-animation-duration :  0ms ;

     animation-name :  none ;

     animation-duration :  0ms ;

}

 

     .slidedown.out.reverse ,  .slideup.out.reverse  {

         /*-webkit-transform: translateY(-100%);

        -webkit-animation-name: slideouttotop;

        -webkit-animation-duration: 200ms;

        -moz-transform: translateY(-100%);

        -moz-animation-name: slideouttotop;

        -moz-animation-duration: 200ms;

        transform: translateY(-100%);

        animation-name: slideouttotop;

        animation-duration: 200ms;*/

         -webkit-transform :  none  ;

         -webkit-animation-name :  none  ;

         -webkit-animation-duration :  200ms  ;

         -moz-transform :  none  ;

         -moz-animation-name :  none  ;

         -moz-animation-duration :  200ms  ;

         transform :  none ;

         animation-name :  none  ;

         animation-duration :  200ms  ;

    }

 

.slidedown.in.reverse ,  .slideup.in.reverse  {

     /*-webkit-animation-name: fadein;

    -webkit-animation-duration: 150ms;

    -moz-animation-name: fadein;

    -moz-animation-duration: 150ms;

    animation-name: fadein;

    animation-duration: 150ms;*/

     -webkit-animation-name :  none ;

     -webkit-animation-duration :  0 ;

     -moz-animation-name :  none ;

     -moz-animation-duration :  0 ;

     animation-name :  none ;

     animation-duration :  0 ;

}

/*Solve Jquery mobile header show and hide when click the long body*/

 

 

   这个解决方案还是比较ugly的，上述方案实际是取消了slideup和slidedown的效果，带来的副作用就是slideup和slidedown失效。最终发现解决方案如此简单：在header和footer设置如下属性即可 data-tap-toggle ="false"。

转载于:https://www.cnblogs.com/skybreak/p/3645548.html