Question

我正在使用asp .net mvc 4.我的问题是在我的模态弹出窗口中我使用鼠标双击。它工作正常，但如果我取消特定的弹出窗体，然后单击详细信息，它将再次显示。主要问题是单一作为双击。我需要在这些点击之间延迟一些时间。我只需要双击显示模态弹出窗口。如果我提交的细节可能是页面刷新它得到的工作。下面显示的是我做出更改的modal.js。（只更改点击到dblclick）

Modal.prototype.show = function (_relatedTarget) {
var that = this
var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })

this.$element.trigger(e)

if (this.isShown || e.isDefaultPrevented()) return

this.isShown = true

this.escape()

**this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]',** $.proxy(this.hide, this))

 Modal.prototype.hide = function (e) {
if (e) e.preventDefault()

e = $.Event('hide.bs.modal')

this.$element.trigger(e)

if (!this.isShown || e.isDefaultPrevented()) return

this.isShown = false

this.escape()

$(document).off('focusin.bs.modal')

this.$element
  .removeClass('in')
  .attr('aria-hidden', true)
  .off('click.dismiss.modal')

$.support.transition && this.$element.hasClass('fade') ?
  this.$element
    .one($.support.transition.end, $.proxy(this.hideModal, this))
    .emulateTransitionEnd(300) :
  this.hideModal()
}

this.$element.on('click.dismiss.modal', $.proxy(function (e) {
    if (e.target !== e.currentTarget) return
    this.options.backdrop == 'static'
      ? this.$element[0].focus.call(this.$element[0])
      : this.hide.call(this)
  }, this))


$(document).on('dblclick.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
  //alert("onclick");
var $this   = $(this)
var href    = $this.attr('href')
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
var option  = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())

e.preventDefault()

$target
  .modal(option, this)
  .one('hide', function () {
    $this.is(':visible') && $this.focus()
  })
  })

在我的candidate.js

中

$('body').on('dblclick', '.IndMaster-edit', function (e) {
    //alert("succ111");
    e.preventDefault();
    //alert($(this).attr('class'));
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
});

   $(".IndMaster-edit").dblclick(function () {
 //alert("first");
var sectionvalue = $(this).attr("data-id");
var titleselection = $(this).attr("title");
//alert(titleselection);
//alert(sectionvalue.toString());
$.ajax({
    async:false,
    // Call CreatePartialView action method
    url: "/IndMaster/EditIndPartial",
    data: { section: sectionvalue, indmanid: titleselection },
    type: 'Get',
    success: function (data) {
        //alert("hhiii");
        //$('#myModal').modal('show');
        $("#IndMaster-DetailModel").empty();
        //alert("end1");
        //alert("success11");
        $("#IndMaster-DetailModel").append(data);
        //alert("end2");
        //alert("success22");
        $("#IndMaster-DetailModel").dialog("open");
        //$("#createForm").hide();
        //alert("end3");
        //alert("success");
    },
    error: function () {
        alert("something seems wrong");
    }
});
});

在我的IndMaster.cshtml中

<td class="tagstd IndMaster-edit" data-id="status" title="@item.Ind_ID">
<span class="btn btn-xs icon-tag pull-left tag-btn" data-id="Package_No" title="@item.Ind_ID" style="visibility:hidden"></span>                                                @item.IND_APP_PASS_STATUS.First().Package_No</td>

我将点击功能更改为dblclick。

Answer 1

我为此创建了一个jsfiddle，请检查，使用此功能，您必须使用延迟，以便计算点击次数

var DELAY = 700, clicks = 0, timer = null;

$(function(){

    $("a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
    });

});

http://jsfiddle.net/y7epojfo/

双击事件使用时如何取消单击事件

1 个答案: