当元素已被删除时检测点击

Question

我正在尝试检测是否在 DatePicker 控件上发生了点击，但我无法准确确定事件目标元素是否是 DatePicker 的一部分。

经过大量调试，我意识到主要问题是 DatePicker 的各个部分与文档分离，因此它们根本不是任何元素的子元素。

感谢this other question，我了解到原因是在切换月份时删除并替换了一部分 DatePicker，因此我从 event.target 获得的元素已分离（它是已删除块的一部分） .

那么，我可以做些什么来确定这次点击发生在我的控制范围内？我正在尝试以不可知论的方式编写此内容，以了解正在使用的内容类型，尽管可以对 DatePickers 进行特定修复。

到目前为止，我所做的是检查我的元素是否包含 DatePicker，以及事件目标是否已分离。如果是这样，我假设点击发生在 DatePicker 上。这并不完美，因为页面上可能还有另一个 DatePicker。此外，被分离的事件目标不一定与 DatePicker 相关。

这是我到目前为止的一个例子：

$(document).on("click", function (event) {
   const stuff = $("something");

   if (stuff.is($(event.target)))          
      return; // click was on stuff

   if ($(event.target).closest(stuff).length)
      return; // click was on descendents of stuff

   if (stuff.is(":active, :focus"))
      return; // stuff is active or focused

   if (stuff.find(":active, :focus").length)
      return; // a descendent of stuff is active or focused

   if (stuff.is(".hasDatepicker") || stuff.find(".hasDatepicker").length) {
      // stuff is or has a date picker
      if (!$(event.target).closest($(document)).length) {
         // event target is detached, and there's a date picker in stuff
         // so have to assume click was on stuff's date picker
         return;
      }
   }

   // click was not within stuff's elements
}

Answer 1

你要找的可能是$(".selector").datepicker("widget")

Per the docs:

返回一个包含日期选择器的 jQuery 对象。 此方法不接受任何参数。

代码示例： 调用小部件方法：

var widget = $( ".selector" ).datepicker( "widget" );

现在您可以从原始元素中获取实际的日期选择器 UI，您可以随意使用它，即检查是否点击了它。

以下是我将如何使用上述方法解决此问题：

$(function() {

  $('#thedate').datepicker({
    dateFormat: 'dd-mm-yy',
    altField: '#thealtdate',
    altFormat: 'yy-mm-dd' 
  });

  $(document).on('mousedown',function(event) {
    // only evaluate if the click was NOT on the element or any of its descendants 
    if (!$(event.target).closest('#some-container').length && !$(event.target).is('#some-container')) {
      // now lets check for any elements in our container that have datepickers 
      var $contanier = $('#some-container');
      var $elementsWithDatePickers = $contanier.find('.hasDatepicker');
      var clickedChildDatePicker = false;
      $elementsWithDatePickers.each(function() {
        // for each datepicker found, check that the click was also not on it or any of its descendants
        var $widget = $(this).datepicker("widget");
        if ($(event.target).is($widget) || $(event.target).closest($widget[0]).length > 0) {
          clickedChildDatePicker = true;
          return false;
        }
      });
      if (!clickedChildDatePicker) {
        $contanier.hide();
      }
    }
  }) 
});

#other{
  background-color:#ccc; 
  padding: 45px;
}
#some-container{
  background-color:#fff;
  padding: 45px;
  
}

<link href="https://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>


<div id="other"> 

<div id="some-container">
  Date :
  <div id="thedate">
  </div>
  <br /> 
</div>

  click here to hide container 
</div>

Answer 2

我不明白你的意思：
« DatePicker 的片段与文档分离，因此它们根本不是任何元素的子元素。»

这是错误的。您可以在页面中看到的所有元素都在 DOM 中（因此“附加”到文档中）。
但有时，不是很长一段时间，这里就是这种情况。

Datepicker 元素在打开时创建并附加到 body。
当它关闭时，它的元素全部被删除。

下面的代码检索被点击的元素，它是tagName、它的class、它的id和它的innerHTML。
我什至在文档中重新创建了它们...
;)

它使用delegation，正如@Roamer 在cmets 中正确提及的那样。

$(document).on("mouseup",".ui-datepicker",function(e){
  var target = e.target;

  var tag = target.tagName.toLowerCase();
  var classes = target.className;
  var ID = target.id;
  var resultString = "<"+tag+" id='"+ID+"' class='"+classes+"'>"+target.innerHTML+"</"+tag+"><br>";
  console.log(resultString);

  var result = $(resultString);
  $("#result").append(result);
});

遗憾的是，我的示例中的 CSS 在 SO sn-p 中效果不佳。 所以它在CodePen。

我使用了mouseup 事件，因为click 不起作用...
可能是由于 Datepicker 中某处的 return false。