Question

我有这个单页面应用程序，而不是页面，一次加载一个部分。这个应用程序的基础是你输入一个查询然后去一个结果页面，并在结果的另一个表格 - 与第一个表格相同，但不是去一个新的视图（进入同一页面的不同部分））结果就在它下面。每当加载新视图时，另一个视图都会被隐藏。（例如：主视图有搜索表单。搜索，提交，隐藏主页视图，然后查看结果视图）。

我的问题是在这一行返回false：

var actions = $('.action');

actions.on('touchstart click', function(event){
    var $this = $(this);

        if ($this.hasClass('no-view')) {
            doAction($this);
            return false; // here
        } 

    viewHandler($this.attr('href'));
});

很重要，但也打破了此处所需的点击事件：

var tickerResultsInput = $('#PickHolder #ticker');
$('body').on('touchstart click', '#results-submit-ticker', function(e){

    $.ajax({
        type: "POST", 
        url: 'http://www.1dayreturn.com/getPicksdev.php', 
        data: "action=GetEverything&stock="+tickerResultsInput.val()+"&application=android",
        beforeSend: function() {
            pickContent.slideUp('400').html('<h2 class="searchloading">Searching for stock data...</h2>');
            $('#analyze-results-form').show();
        },
        complete: function(data){
            $('.searchloading').hide('300');
            pickContent
                .html(data.responseText)
                .slideDown('400');
        }  
    });
});

如果你想看看HTML：

<div id="PickHolder" class="view container">
    <form id="analyze-results-form" action="" class="analyze-form">
        <div class="input-container">
            <input id="ticker" class="input-stock" type="text" placeholder="Add Ticker">

        </div><!-- /.input-container -->
        <button id="results-submit-ticker" class="action action-data btn no-view" data-ref="#PickHolder">Analyze</button>
    </form>
    <div id="pick-content"></div>
</div>

返回false;很重要因为在if语句下面是这样的：`viewHandler（$ this.attr（'href'））;

这只是隐藏某个部分并打开所请求部分的功能：

viewHandler = function(ref){
    /*
        ref = value of href or data-ref attr.
        (#home for example)
     */
    var currentView = $('.current'),
        view = $(ref);
    if (ref != currentView.attr('id')) {
        currentView.addClass('animate-exit');
        /*
            When the CSS animation ends
         */
        currentView.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            currentView.removeClass("animate-exit current");
            view.addClass('animate-in current');
            /*
                When the new current view CSS animation ends.
             */
            view.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                view.removeClass('animate-in');
            });
        });

    } 

}

但是如果if语句为true，我们不希望这个运行，只有一个函数然后就是它。不改变观点。

如何在不破坏click事件的绑定的情况下使用return false或类似的方法？

Answer 1

问题是return false将停止事件传播并阻止默认操作。

从我所看到的，您只想阻止默认操作

var actions = $('.action');

actions.on('touchstart click', function (event) {
    var $this = $(this);

    if ($this.hasClass('no-view')) {
        doAction($this);
        event.preventDefault();
        return; // here
    }

    viewHandler($this.attr('href'));
});

由于事件传播，附加到正文的处理程序被执行，因为你正在停止处理程序，所以不会调用处理程序。

返回发生错误停止事件

1 个答案: