通过鼠标向下选择父级中的最后一个子项

Select last child in parent via mousedown

本文关键字：最后一个鼠标选择更新时间：2023-09-26

小提琴：http://liveweave.com/ZwZPMA
（简化的小提琴作为片段在帖子底部提供。这个是为了向您展示它的用法）

我正在开发网页设计应用程序，遇到了一个问题。

现在我知道了几种选择元素子元素的方法：

$(element *)
$(element).children()

然而，这些只是获取元素直系后代的方法。

但是，我想选择我单击的元素，无论它是如何成为其主父/容器的后代（例如我的#dynamic-storage）。

因此，这里的这种方法将不起作用...

$("#dynamic-storage *").children().children().children()

我知道我可以使用$(".selected").children().length >= 0来检查我选择的元素是否有任何子元素。

if ( $(".selected").children().length <= 0 ) {
  console.log("no children"); 
  return false;
} else if ( $(".selected").children().length >= 0 ) {
  console.log("yes children");
  return false;
}

这是简化的小提琴。

$(document).ready(function() {
  // Draggable FunctionBar
  $(".functionbar").draggable({
    axis: "y",
    handle: ".handlesbar"
  });
  // Select Elements
  var SelectElements = function() {
    $("#dynamic-storage *").children().children().children().on("mouseup touchend", function() {
      if ( $(".selected").is(":visible") ) {
        $(".selected").removeClass("selected");
      }
      $(this).addClass("selected");
    });
  };
  // Clear Selection
  var ClearSelection = function() {
    $(".selected").removeClass("selected");
  };
  SelectElements();
});

/* Body */
#dynamic-storage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
/* FunctionBar */
.functionbar {
  position: absolute;
  top: 20px;
  left: 25px;
  right: 25px;
  z-index: 998;
}
.functionbar .handlesbar {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  padding: 6px 0;
  border-radius: 10px 10px 0 0;
  font: 24px arial;
  text-align: center;
  background: hsla(180, 0%, 0%, .75);
  word-spacing: 12px;
  z-index: 999;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}
.functionbar a {
  text-decoration: none;
  color: hsl(180, 0%, 90%);
}
.functionbar .active {
  color: #9cf;
}
.functionbar .hide {
  display: none;
}
/* Dialog Sec */
.functionbar .reveal {
  position: relative;
  top: 50px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 200px;
  overflow: auto;
}
.functionbar .reveal, .functionbar input[type=text], .functionbar textarea {
  font-family: arial;
  background: rgba(255, 255, 255, 0.6);
}
.functionbar input[type=text], .functionbar textarea {
  border: 1px solid rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}
.functionbar input[type=text], .functionbar textarea, #change-selected-tag, #confirm-style {
  font-size: 24px;
  color: #000;
}
#dynamic-storage .selected {
  outline: 2px dotted #69f;
}
/* Addable Elements */
.functionbar .addcontent {
  text-align: center;
}
.functionbar .addcontent .element, .functionbar .editcontent .element {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 2%;
  width: 20%;
  border: 1px solid rgba(204, 204, 204, 0.67);
  color: #262B2F;
}
.functionbar .element:hover {
  background: rgba(255, 255, 255, 0.6);
}
.functionbar .element .fa {
  font-size: 26px;
}
.functionbar .element h4 {
  font-weight: 300;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link type='text/css' rel='stylesheet' href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
    <link type="text/css" rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/poly/css/application.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  </head>
  <body>
    <div id="dynamic-storage">
      <div class="grid">
        <div class="grid__col--7">
          <div class="centered grid__col--8">
            <p>
              &nbsp;
            </p>
            <h1 class="headline-primary--grouped">Take a look at this amazing headline</h1>
            <h2 class="headline-secondary--grouped selected">Don't forget about the subtitle</h2>
            <p>This is a typical paragraph for the UI Kit. <a href="#">Here is what a link might look like</a>. The typical font family for this kit is Helvetica Neue.  This kit is intended for clean and refreshing web layouts. No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using italics as well from time to time</em>. Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but this amazing paragraph as well. :)</p>
            <blockquote>You know what really gets me going? A really nice set of block quotes.  That's right, block quotes that say, "Hey, I'm an article you want to read and nurture."</blockquote>
          </div>
        </div>
        <div class="grid__col--4">
          <h4>Offcanvas Menu</h4>
          <div class="offcanvas">
            <span class="icn--close">
              <b class="srt">close</b>
            </span>
            <ul class="menu" role="navigation">
              <a class="menu__link" href="#">Link 1</a>
              <a class="menu__link" href="#">Link 2</a>
              <a class="menu__link" href="#">Link 3</a>
              <a class="menu__link--end" href="#">Link 4</a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

您实际上是在尝试获取单击的目标。事件对象在其属性之一（target 属性）中具有触发事件的元素。

因此，通过将事件作为函数的参数，您可以选择单击的元素字节执行$(event.target)。请注意，您必须在父元素上绑定事件，在本例中：$('#dynamic-storage') .

$(document).ready(function() {
  // Draggable FunctionBar
  $(".functionbar").draggable({
    axis: "y",
    handle: ".handlesbar"
  });
  // Select Elements
  var SelectElements = function() {
    $("#dynamic-storage").on("mouseup touchend", function(e) { //Pass the event
      if ( $(".selected").is(":visible") ) {
        $(".selected").removeClass("selected");
      }
      // Target the element
      $(e.target).addClass("selected");
    });
  };
  // Clear Selection
  var ClearSelection = function() {
    $(".selected").removeClass("selected");
  };
  SelectElements();
});

/* Body */
#dynamic-storage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
/* FunctionBar */
.functionbar {
  position: absolute;
  top: 20px;
  left: 25px;
  right: 25px;
  z-index: 998;
}
.functionbar .handlesbar {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  padding: 6px 0;
  border-radius: 10px 10px 0 0;
  font: 24px arial;
  text-align: center;
  background: hsla(180, 0%, 0%, .75);
  word-spacing: 12px;
  z-index: 999;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}
.functionbar a {
  text-decoration: none;
  color: hsl(180, 0%, 90%);
}
.functionbar .active {
  color: #9cf;
}
.functionbar .hide {
  display: none;
}
/* Dialog Sec */
.functionbar .reveal {
  position: relative;
  top: 50px;
  left: 0;
  margin: auto;
  width: 100%;
  height: 200px;
  overflow: auto;
}
.functionbar .reveal, .functionbar input[type=text], .functionbar textarea {
  font-family: arial;
  background: rgba(255, 255, 255, 0.6);
}
.functionbar input[type=text], .functionbar textarea {
  border: 1px solid rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}
.functionbar input[type=text], .functionbar textarea, #change-selected-tag, #confirm-style {
  font-size: 24px;
  color: #000;
}
#dynamic-storage .selected {
  outline: 2px dotted #69f;
}
/* Addable Elements */
.functionbar .addcontent {
  text-align: center;
}
.functionbar .addcontent .element, .functionbar .editcontent .element {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 2%;
  width: 20%;
  border: 1px solid rgba(204, 204, 204, 0.67);
  color: #262B2F;
}
.functionbar .element:hover {
  background: rgba(255, 255, 255, 0.6);
}
.functionbar .element .fa {
  font-size: 26px;
}
.functionbar .element h4 {
  font-weight: 300;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link type='text/css' rel='stylesheet' href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" />
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" />
    <link type="text/css" rel="stylesheet" href="http://treehouse-code-samples.s3.amazonaws.com/poly/css/application.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  </head>
  <body>
    <div id="dynamic-storage">
      <div class="grid">
        <div class="grid__col--7">
          <div class="centered grid__col--8">
            <p>
              &nbsp;
            </p>
            <h1 class="headline-primary--grouped">Take a look at this amazing headline</h1>
            <h2 class="headline-secondary--grouped selected">Don't forget about the subtitle</h2>
            <p>This is a typical paragraph for the UI Kit. <a href="#">Here is what a link might look like</a>. The typical font family for this kit is Helvetica Neue.  This kit is intended for clean and refreshing web layouts. No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using italics as well from time to time</em>. Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but this amazing paragraph as well. :)</p>
            <blockquote>You know what really gets me going? A really nice set of block quotes.  That's right, block quotes that say, "Hey, I'm an article you want to read and nurture."</blockquote>
          </div>
        </div>
        <div class="grid__col--4">
          <h4>Offcanvas Menu</h4>
          <div class="offcanvas">
            <span class="icn--close">
              <b class="srt">close</b>
            </span>
            <ul class="menu" role="navigation">
              <a class="menu__link" href="#">Link 1</a>
              <a class="menu__link" href="#">Link 2</a>
              <a class="menu__link" href="#">Link 3</a>
              <a class="menu__link--end" href="#">Link 4</a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>