Question

在我的新订单视图中，我有：

<a id="showhidetrigger1" class='btn btn-primary' 
            onclick="clicked('showhidetarget1');"><%= current_user.titles[0] %></a>

<a id="showhidetrigger2" class='btn btn-primary'
            onclick="clicked('showhidetarget2');"><%= current_user.titles[2] %></a>

<a id="showhidetrigger3" class='btn btn-primary'
            onclick="clicked('showhidetarget3');"><%= current_user.titles[1] %></a>

<div id="showhidetarget1" class='center'>
    <p><%= render :partial => "productstype", 
                  :locals => {:selectedproduct => @current.bottles, :title => @current.titles[0] } %>
    </p> 
</div>

<div id="showhidetarget2" class='center'>
    <p><%= render :partial => "productstype", 
                  :locals => {:selectedproduct => @current.pourings, :title => @current.titles[2] } %>
    </p>
</div>

<div id="showhidetarget3" class='center'>
    <p><%= render :partial => "productstype", 
                  :locals => {:selectedproduct => @current.cocktails, :title => @current.titles[1] } %>
    </p>
</div>

并且在order.js中我有：

$(document).ready(function () {


    hideall = function() {
        $('#showhidetarget1').hide();
        $('#showhidetarget2').hide();
        $('#showhidetarget3').hide();
    };

    hideall();

    window.clicked = function(item) {

        hideall();
        event = event || window.event;
        event.preventDefault();
        event.stopPropagation();
        $('#' + item).toggle(400);
        return false;
    };    

});

隐藏/显示工作正常但单击按钮时我无法在顶部滚动。我已经尝试了几种解决方案（like these和其他堆栈），但都没有。

编辑：按建议使用jquery解决... this感谢大家！所以我的jquery函数是：

jQuery(function(){
        jQuery('.targetDiv').hide();
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show();
        });
});

Answer 1

你需要更像这样的东西：

$(window).on('click', function(evt) {
  evt.preventDefault();
  // Do whatever logic here
});

如果你使用普通的Javascript，那么你需要这样的东西：

window.addEventListener('click', function(evt) {
  evt.preventDefault();
  // Do something else
});

Answer 2

如果您正在使用jQuery，那么在jQuery中编写所有代码。这是修改后的代码，应该可行。

jQuery将事件对象作为第一个参数返回，因此我将item更改为event。您可以使用此上下文访问当前元素，例如$(this)

$(document).ready(function () {

    var hideall = function() {
        $('#showhidetarget1').hide();
        $('#showhidetarget2').hide();
        $('#showhidetarget3').hide();
    };

    hideall();

    $(document).click(function(event) {
        event.preventDefault();
        event.stopPropagation();

        hideall();
        $(this).toggle(400);
    });    

});

Answer 3

您必须将 preventDefault 代码移至项目点击而不是窗口。原因很简单：窗口是事件链的最后一个元素，所以没有别的东西可以阻止泡沫;）

javascript preventDefault不起作用

3 个答案: