Question

后

我想知道如何构建依赖于用户点击事件的preventDefault / stopPropagation，例如：

<html>
   <a data-handler="add_to_cart" data-item_id="5">Click</a>
</html>

单击元素当前调用后端（通过ajax）将项目5添加到用户购物车。但是，如果我想首先注入一个对话框（仅限javascript）

，该怎么办？

var template = '' +
    '<div class="dialog">' +
        '<p>Really add this item?</p>' +
        '<button>Yes</button>' +
        '<button>No</button>' +
    '</div>'

$(a).click(function(){
    # open the dialog template
    # if the correct button is clicked continue the default event
});

我不想使用confirm或prompt，我基本上正在寻找一种方法来使用我自己的html对话框来实现他们的功能。

Answer 1

您有几种方法可以完成此任务。我建议的两个方法是覆盖提示方法（see here和here关于覆盖和更改外观），或者创建自己的对话框并监视其上的按钮。

重写：

function prompt() { 
    //Insert your HTML, show the dialog
}

监控另一次点击：

$('#someOtherButton').click(function(){
    //Do what you want
});

我建议简单地覆盖prompt()。

Answer 2

您可以阻止传播并从对话框中重新调用click()方法，并要求传播。

var template = '' +
    '<div class="dialog">' +
        '<p>Really add this item?</p>' +
        '<button class=correctbutton>Yes</button>' +
        '<button>No</button>' +
    '</div>'

$(a).click(function(){
    if(window.correctButtonClicked){
     return true;//continue propagation
    }
    window.clickedA=a // store current clicked object
    openDialog() 
    return false; //stop propagation
});

function openDialog(){
 //Make a dialog from the template
 $('.correctbutton').click(function(){
      window.correctButtonClicked=true;
      $(window.clickedA).click(); 
 });

}

暂停点击事件直到用户输入

2 个答案: