进一步onClick被阻止导致新的onclick不工作|覆盖event.preventDefault（）

我正在处理原始开发人员可能已添加event.preventDefault（）或一些如何阻止任何进一步点击某些表td元素的脚本。他们的点击产生了一个Ajax请求，我可以在浏览器控制台中看到，但是我的新的onClick处理程序从不执行。我喜欢添加另一个onclick处理程序，在其中显示模式弹出窗口。显示模式很简单我只是不确定他们是如何停止在元素上添加进一步的onclick处理的。进一步onClick被阻止导致新的onclick不工作|覆盖event.preventDefault（）

我已经用下面的代码实际测试了代码，看看发生了什么，我可以看到比我看到的警报;

Event.prototype.stopPropagation = function(){ alert('stopPropagation') } 
Event.prototype.preventDefault = function(e){ console.log (e); alert('preventDefault') }

所以我想event.preventDefault()正在使用。如果阻止进一步点击，我该如何强制我的代码在点击事件上执行。这是我的代码;

(function(){ 
    Event.prototype.stopPropagation = function(){ alert('stopPropagation') } 
    Event.prototype.preventDefault = function(e){ console.log (e); alert('preventDefault') } 
    jQuery('body').on('click', 'td.bookable', function (e){ 
     console.log ("Clickable!"); //This is not logged. 
     //I want to add my show modal popup here. 
    }); 
})();

表看起来像这样;

<table class="ui-datepicker-calendar"> 
    <thead> 
     <tr> 
     <th scope="col"><span title="Monday">M</span></th> 
     <th scope="col"><span title="Tuesday">T</span></th> 
     <th scope="col"><span title="Wednesday">W</span></th> 
     <th scope="col"><span title="Thursday">T</span></th> 
     <th scope="col"><span title="Friday">F</span></th> 
     <th scope="col" class="ui-datepicker-week-end"><span title="Saturday">S</span></th> 
     <th scope="col" class="ui-datepicker-week-end"><span title="Sunday">S</span></th> 
     </tr> 
    </thead> 
    <tbody> 
     ... 
     <tr> 
     <td class=" ui-datepicker-unselectable ui-state-disabled bookable" title="This date is available"><span class="ui-state-default">9</span></td> 
     <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">10</span></td> 
     <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">11</span></td> 
     <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">12</span></td> 
     <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">13</span></td> 
     <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">14</span></td> 
     <td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">15</span></td> 
     </tr> 
     <tr> 
     <td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">16</span></td> 
     <td class=" ui-datepicker-unselectable ui-state-disabled bookable ui-datepicker-today" title="This date is available"><span class="ui-state-default">17</span></td> 
     <td class=" ui-datepicker-unselectable ui-state-disabled bookable" title="This date is available"><span class="ui-state-default">18</span></td> 
     <td class=" bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">19</a></td> 
     <td class=" bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">20</a></td> 
     <td class=" ui-datepicker-week-end bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">21</a></td> 
     <td class=" ui-datepicker-week-end bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="9" data-year="2017"><a class="ui-state-default" href="#">22</a></td> 
     </tr> 
     ... 
    </tbody> 
</table>

对于具有19的td，当我添加onClick回调时它不起作用。我特别不能将onclick绑定到类为not_bookable的元素。

来源

2017-10-17 LogicDev

所以叫你onmousedown。删除preventDefault是一个坏主意。 – epascarello

谢谢你是一个不错的选择。我想知道是否有其他方法可以实际克服预防进一步的点击。 – LogicDev

我不确定如果无法删除原始的preventDefault，您将能够实现此目的。如何使用另一个事件，如mousedown？我不是很理想，但...

来源

2017-10-17 21:06:40

进一步onClick被阻止导致新的onclick不工作|覆盖event.preventDefault（）

回答

相关问题