防止元素上的click事件持续2秒

Question

我的代码如下。当我点击.click div时，它会在.append div中附加一个文本。

现在我想要的是当我第一次点击.click div时，文本应该附加到.append div，但是第二次点击应该在2秒后激活。意味着无论我在.click div中点击I在0到2秒之间多少次，该事件都应该被触发一次。

我尝试了event.stopPropagation()和event.preventDefault()但没有工作。

$(document).on('click', '.click', function(event) {
  $('.append').append('<span>append</span>');
  setTimeout(function() {
    event.stopPropagation();
  }, 2000);
})

body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Answer 1

您可以通过添加点击变量和if语句来完成此操作。

在第一次单击时，它会检查变量并运行该函数，但也会更新变量。然后在2秒后重置变量以重新激活该功能。

＆＃13;

＆＃13;

var clickActive = 1;

$(document).on('click', '.click', function(event) {
  if (clickActive) {
    $('.append').append('<span>append</span>');
    clickActive = 0;
    setTimeout(function() {
      clickActive = 1;
    }, 2000);
  }
})

＆＃13;

body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用jquery .one()设置处理程序，然后在2秒后使用.one()再次设置。

.one()方法添加一次性事件处理程序，一旦调用事件就会将其删除。

＆＃13;

＆＃13;

function eventHandler(event) {
  $('.append').append('<span>append</span>');
  
  setTimeout(function() {
    $(document).one('click', '.click', eventHandler);
  }, 2000);
}

$(document).one('click', '.click', eventHandler);

＆＃13;

body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

在使用事件委托时，使用它来利用删除选择器类，即事件处理程序中的click，然后在间隔后添加

$(document).on('click', '.click', function(event) {
  $('.append').append('<span>append</span>');
  var self = $(this);
  self.removeClass('click'); //Remove the class
  setTimeout(function(elem) {
    elem.addClass('click'); //Add the class
  }, 2000, self);
})

body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Answer 4

虽然使用setTimeout是一个选项，但我个人更愿意避免在可能的情况下设置计时器，并使用变量跟踪最后一次点击的时间：

var lastClickTime = 0;
$(document).on('click', '.click', function(event) {
  var thisClickTime = new Date().getTime();
  if (thisClickTime - lastClickTime > 2000) {
    $('.append').append('<span>append</span>');
    lastClickTime = thisClickTime;
  }
});

Answer 5

您可以使用变量跟踪：

var clicked = false;

$(document).on('click', '.click', function(event) {
  if(!clicked){
    clicked = true;
    $('.append').append('<span>append</span>');
    setTimeout(function() {
      clicked = false;
    }, 2000);
  }
});

body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Answer 6

一种方法是添加“flag”变量。

var enabled = true;

$(document).on('click', '.click', function(event) {
  if (!enabled) return;

  $('.append').append('<span>append</span>');
  enabled = false;

  setTimeout(function() {
    enabled = true;
  }, 2000);
})

body {
  font: 13px Verdana;
}

span {
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">click</div>
<div class="append"></div>

Answer 7

尝试使用：

<Style x:Key="CustomNavigationMenuStyle" TargetType="NavigationView">
    <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid Margin="12,5,0,11" VerticalAlignment="Stretch">
                    <TextBlock x:Name="Header" Style="{StaticResource TitleTextBlockStyle}" Text="{Binding}" TextWrapping="NoWrap" VerticalAlignment="Bottom"/>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="NavigationView">
                <Grid x:Name="RootGrid">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="DisplayModeGroup">
                            <VisualState x:Name="Compact"/>
                            <VisualState x:Name="Expanded">
                                <VisualState.Setters>
                                    <Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Minimal">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Margin" Value="48,0,0,0"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="TogglePaneGroup">
                            <VisualState x:Name="TogglePaneButtonVisible"/>
                            <VisualState x:Name="TogglePaneButtonCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="TogglePaneButton.Visibility" Value="Collapsed"/>
                                    <Setter Target="PaneContentGridToggleButtonRow.Height" Value="4"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="HeaderGroup">
                            <VisualState x:Name="HeaderVisible"/>
                            <VisualState x:Name="HeaderCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="HeaderContent.Visibility" Value="Collapsed"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SettingsGroup">
                            <VisualState x:Name="SettingsVisible"/>
                            <VisualState x:Name="SettingsCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="AutoSuggestGroup">
                            <VisualState x:Name="AutoSuggestBoxVisible"/>
                            <VisualState x:Name="AutoSuggestBoxCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="AutoSuggestArea.Visibility" Value="Collapsed"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="PaneStateGroup">
                            <VisualState x:Name="NotClosedCompact"/>
                            <VisualState x:Name="ClosedCompact">
                                <VisualState.Setters>
                                    <Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed"/>
                                    <Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="TitleBarVisibilityGroup">
                            <VisualState x:Name="TitleBarVisible"/>
                            <VisualState x:Name="TitleBarCollapsed">
                                <VisualState.Setters>
                                    <Setter Target="PaneButtonGrid.Margin" Value="0,32,0,0"/>
                                    <Setter Target="PaneContentGrid.Margin" Value="0,32,0,0"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Width="{StaticResource PaneToggleButtonSize}" Canvas.ZIndex="100">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid x:Name="TogglePaneTopPadding"/>
                        <Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Grid.Row="1" Style="{TemplateBinding PaneToggleButtonStyle}"/>
                    </Grid>
                    <SplitView x:Name="RootSplitView" Background="{TemplateBinding Background}" CompactPaneLength="{TemplateBinding CompactPaneLength}" DisplayMode="Inline" IsTabStop="False" IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenPaneLength="{TemplateBinding OpenPaneLength}" PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}">
                        <SplitView.Pane>
                            <Grid x:Name="PaneContentGrid">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="56"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="8"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="ContentPaneTopPadding"/>
                                <Grid x:Name="AutoSuggestArea" Height="40" Grid.Row="2" VerticalAlignment="Center">
                                    <ContentControl x:Name="PaneAutoSuggestBoxPresenter" Content="{TemplateBinding AutoSuggestBox}" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
                                    <Button x:Name="PaneAutoSuggestButton" Content="&#xE11A;" MinHeight="40" Style="{TemplateBinding PaneToggleButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
                                </Grid>
                                <NavigationViewList x:Name="MenuItemsHost" ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}" ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}" ItemTemplate="{TemplateBinding MenuItemTemplate}" IsItemClickEnabled="True" ItemsSource="{TemplateBinding MenuItemsSource}" ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}" Margin="0,0,0,20" Grid.Row="3" SelectionMode="Single" SelectedItem="{TemplateBinding SelectedItem}"/>
                                <Border x:Name="FooterContentBorder" Child="{TemplateBinding PaneFooter}" Grid.Row="4"/>
                                <NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="5">
                                    <NavigationViewItem.Icon>
                                        <SymbolIcon Symbol="Setting"/>
                                    </NavigationViewItem.Icon>
                                </NavigationViewItem>
                            </Grid>
                        </SplitView.Pane>
                        <Grid x:Name="ContentGrid">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
                            <ContentPresenter Content="{TemplateBinding Content}" Grid.Row="1"/>
                        </Grid>
                    </SplitView>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 8

您好，您可能想要做这样的事情

$(document).on('click', '.click', function(event) {
 var divState = false;
 if(divState ){ setTimeout(function() {
       $('.append').append('<span>append</span>'); 
   divState=false; },2000);
   } else{ 
     $('.append').append('<span>append</span>');divState= true;
  }
})

或

$(document).on('click', '.click', function(event) {
 var divState = false;
 divState ? function(){setTimeout(function() {
       $('.append').append('<span>append</span>'); 
   divState = false },2000);} : function(){ 
   $('.append').append('<span>append</span>'); divState = true;};
})

哪种方式最适合你