【问题标题】：Prevent ALL default animations/actions阻止所有默认动画/动作
【发布时间】：2013-08-23 07:25:00
【问题描述】：

好的，所以我有一个基本的 jQuery Mobile 页面。

我需要的是：当用户点击一个元素（例如滑块或按钮）时

不应显示动画
不应启用任何“动作”（如滑块移动等）
不应发生颜色变化，例如悬停时的按钮变化

<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
    <head>
        <title>Website Title</title>

        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">

        <link rel="stylesheet" href="jquery.mobile.min.css" />
        <link rel="stylesheet" href="custom.css" />
        <link rel="stylesheet" href="dev.css" />


    </head>

    <body id="jqm-website-3539" class=""  >


        <!-- New Page #1 -->
        <div data-role="page" comp-id="jqm-page-2862" id="jqm-page-2862" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >

            <!-- New Header #1 -->
            <div data-role="header" comp-id="jqm-header-6813" id="jqm-header-6813" class="" data-position="fixed" data-fullscreen="false" data-theme="" >
                <h1></h1>
            </div>
            <!-- / New Header #1 -->

            <!-- New Content #1 -->
            <div data-role="content" comp-id="jqm-content-7853" id="jqm-content-7853" class="" data-theme=""  >

                <!-- New Button #1 -->
                <div comp-id="jqm-button-6345" >
                    <a data-role="button" id="jqm-button-6345" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme=""  href="#" data-transition="">
                        Button
                    </a>
                </div>
                <!-- / New Button #1 -->

                <!-- New Navigation Bar #1 -->
                <div data-role="navbar" data-position="fixed" id="jqm-navbar-5393" class="" data-iconpos="left"  >
                    <ul comp-id="jqm-navbar-5393" >

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a comp-id="jqm-navbar-item-5974" href="#" id="jqm-navbar-item-5974" class="" data-icon="home" data-theme="" >
                            One
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a comp-id="jqm-navbar-item-5409" href="#" id="jqm-navbar-item-5409" class="" data-icon="plus" data-theme="" >
                            Two
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->

                    <!-- New Navigation Bar Item #1 -->
                    <li  >
                        <a  comp-id="jqm-navbar-item-925" href="#" id="jqm-navbar-item-925" class="" data-icon="gear" data-theme="" >
                            Three
                        </a>
                    </li>
                    <!-- / New Navigation Bar Item #1 -->
                    </ul>
                </div>
                <!-- / New Navigation Bar #1 -->

                <!-- New SearchField #1 -->
                <div data-role="fieldcontain" data-controltype="searchinput" comp-id="jqm-input-search-9514" id="jqm-input-search-9514" class="" data-mini="false" data-theme=""  >
                    <input name="" placeholder="" value="" type="search">
                </div>
                <!-- / New SearchField #1 -->

                <!-- New Switch #1 -->
                <div data-role="fieldcontain" data-controltype="toggleswitch" comp-id="jqm-input-switch-2499" id="jqm-input-switch-2499" class="" data-highlight="false" data-mini="true" data-theme="" data-track-theme=""  >
                    <select data-role="slider">
                        <option value="0">
                            On
                        </option>
                        <option value="Off">
                            Off
                        </option>
                    </select>
                </div>
                <!-- / New Switch #1 -->

                <!-- New TextArea #1 -->
                <div data-role="fieldcontain" data-controltype="textarea" comp-id="jqm-text-area-8880" id="jqm-text-area-8880" class="" data-mini="false" data-theme=""  >
                    <label>

                    </label>
                    <textarea name="" placeholder="" id="jqm-text-area-8880" class="" data-mini="false" data-theme=""  ></textarea>
                </div>
                <!-- / New TextArea #1 -->

            </div>
            <!-- / New Content #1 -->
        </div>
        <!-- / New Page #1 -->

        <!-- New Page #1 -->
        <div data-role="page" comp-id="jqm-page-7022" id="jqm-page-7022" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >

        </div>
        <!-- / New Page #1 -->


        <script src="jquery.min.js"></script>
        <script src="jquery.mobile.min.js"></script>
        <script src="custom.js"></script>
        <script src="dev.js"></script>

    </body>
</html>
<!-- / New Website #1 -->

这可行吗？如果有，怎么做？

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

如果您不希望发生任何事情，那么只需在点击时调用 event.preventDefault。

$("#button").click( function (event) {
    event.preventDefault();
});

如果您仍想执行某些功能，例如链接到 URL，请将其包含在您的回调中。

$("#button").click( function (event) {
    window.location = $(this).attr("href");
    event.preventDefault();
});

【讨论】：

嗯，这肯定涉及“禁用操作”部分。效果怎么样？如果将鼠标悬停在按钮上，“效果”仍然存在。我需要它看起来应该没有任何其他影响...... :-)
不幸的是，您无法使用 preventDefault 关闭 css 悬停效果。您需要在悬停时添加一个类，然后在您的 css 文件中指定当该类存在时没有悬停效果。

【解决方案2】：

如果你的目标是“禁用”整个页面，你可以覆盖一个（半）透明的 div：

function disablePage() {
    $('body').append($('<div />').css({
        width: '100%',
        height: '100%', 
        background: '#fff',
        position: 'fixed',
        zIndex: 999,
        top: 0,
        left: 0,
        opacity: .2 // or 0 for completely transparent
    }));
}

【讨论】：

好吧，但是叠加层下方的项目是否仍可点击？

【解决方案3】：

你可以使用 jQuery(':animated') 函数

$('.btn1').click(function(){
    $('.one').animate({'width':'100%'},5000);
});
$('.btn2').click(function(){
    $('.two').animate({'width':'100%'},5000);
});
$('.btn3').click(function(){
    $('.three').animate({'width':'100%'},5000);
});

$('.all').click(function(){
    $(':animated').stop();
});

demo

【讨论】：

这是一个非常有趣的例子。但是，它与原始问题无关紧要...... :-)
你没有提供 jquery，所以我建立了自己的。您可以使用自己的选择器并应用 :animated 选择器来停止。
伙计，我问的问题与你回答的问题无关。当一个页面启用 jQueryMobile 时，它的元素会被 jQueryMobile 自动“改变”（例如，悬停时的按钮有一些特殊效果等等）。这就是我要禁用的功能。
“不应该显示动画不应该启用“动作”（比如滑块移动等）不应该发生颜色变化，比如悬停时按钮的变化”这让我很困惑......应该我删除答案？