Изменение размера окна jQuery при наличии функции щелчка .bind

Я использую плавную прокрутку для привязки сценария, и мой сайт пытается практиковать адаптивный веб-дизайн. Мне нужно, чтобы событие клика функционировало только тогда, когда ширина браузера превышает 900 пикселей.

$(function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            stuffHappens;
        });
    }
});

Я также пытался использовать функцию .resize окна, но результаты довольно глючные. Окончательный результат должен работать при загрузке и проверять изменение размера браузера (на случай, если его нужно включить или отключить). Предложения?

$(window).resize(function() {
});

if-statement jquery syntax window-resize
person Jo Wroten    schedule 03.07.2012    source источник
comment
Дубликат этого ответа: stackoverflow. ком/вопросы/2597152/   -  person Conner    schedule 03.07.2012
comment
Итак, вы хотите, чтобы событие клика срабатывало, только если размер окна > 900?   -  person Arun P Johny    schedule 03.07.2012

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что вы ищете

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    </head>
    <body>
        <div class="clickme">Click Me</div>
    </body>
    <script>
        $(document).ready(function(){
            var handler = function(){
                console.log("clicked");
            };
            var $window = $(window);

            var setClickHandler = function(){
                if($window.width() > 900){
                    var registered = false;
                    var events = $(".clickme").data("events");
                    if(events){
                        var handlers = $(".clickme").data("events").click;
                        if(handlers){
                            $.each(handlers, function(index, e){
                                if(e.handler == handler){
                                    registered = true;
                                }
                            });
                        }
                    }
                    if(!registered){
                        $(".clickme").on("click", handler );
                    }
                } else {
                    $(".clickme").off("click", handler );
                }
            };

            setClickHandler();
            $window.on("resize", setClickHandler);
        });
    </script>
</html>

Это выглядит немного сложно, но это лучшее, что я смог придумать.
Здесь мы регистрируем и отменяем регистрацию обработчика в зависимости от ширины окна.

Еще одно простое решение — проверить условие в обработчике.

            $(document).ready(function(){
            var handler = function(){
                if($window.width() > 900){
                    console.log("clicked");
                }
            };
            var $window = $(window);

            $(".clickme").on("click", handler );
        });
person Arun P Johny    schedule 03.07.2012
comment
Извините, Арун, я не смог заставить этот скрипт работать. Но я нашел решение, опубликованное Коннером выше, и разместил здесь полный ответ, который я использовал. Я очень ценю ваше время, когда вы пытаетесь помочь мне решить эту проблему! - person Jo Wroten; 06.07.2012

arrow_upward
0
arrow_downward

Большое спасибо @Conner за ссылку на функция изменения размера jQuery не работает на загрузка страницы

Используя этот код, я смог накрутить этот скрипт для плавной прокрутки к любому элементу статьи при нажатии, но только если ширина окна больше 900! Идеально.

onResize = function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            var $myPos = $(this);

            $('html, body').stop().animate({
                scrollLeft: $($myPos).offset().left -0
            }, 500, 'easeInOutExpo');
            event.preventDefault();
        });
    }
    else{
        $('article').unbind('click');
    }
}
person Jo Wroten    schedule 06.07.2012