demo

Question

好的，所以我有一个基本的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 -->

这可行吗？如果是这样，怎么样？

Answer 1

如果您根本不想发生任何事情，那么只需点击即可调用event.preventDefault。

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

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

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

Answer 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
    }));
}

Answer 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();
});

防止所有默认动画/操作

3 个答案:

demo