Fatal编程技术网
  • javascript/
  • Javascript 是否同时单击两个图元？

Javascript 是否同时单击两个图元？

javascript reactjs events

Javascript 是否同时单击两个图元？,javascript,reactjs,events,onclick,element,Javascript,Reactjs,Events,Onclick,Element,我有一个场景，用户可以选择1个元素或2个元素来单击 如果用户选择了2个元素，他可以在一次单击中选择2个元素，但只能选择相邻元素 例如： 如果用户单击Elem 1容器，下面的容器将被激活或单击 要素1和要素2 如果用户单击Elem 3容器，下面的容器将被激活或单击 第二要素和第三要素 此外，如果用户单击Elem 2，它将取决于用户单击的最近区域（Y轴），如果它将与Elem 1或Elem 3合作 但是不是元素1到3，因为它们之间有一个间隙（元素2），正如我所提到的，只有相邻的容器 我正在使用Reac

我有一个场景，用户可以选择1个元素或2个元素来单击
如果用户选择了2个元素，他可以在一次单击中选择2个元素，但只能选择相邻元素
例如：
如果用户单击Elem 1容器，下面的容器将被激活或单击
要素1和要素2
如果用户单击Elem 3容器，下面的容器将被激活或单击
第二要素和第三要素 此外，如果用户单击Elem 2，它将取决于用户单击的最近区域（Y轴），如果它将与Elem 1或Elem 3合作

但是不是元素1到3，因为它们之间有一个间隙（元素2），正如我所提到的，只有相邻的容器

我正在使用ReactJS


要素1
要素2
要素3
您可以使用jQuery的.next（）方法查找下一个div

$（.myClass”）。在（“单击”，函数（）{
$（'.myClass'）.css（“背景”，“无”）；
$（this.css（“背景”、“红色”）；
$（this.next（“.myClass”）.css（“背景”，“红色”）；
})

要素1
要素2
要素3
编辑1 根据OP随后的评论，我意识到他们还希望第二个选中的项目取决于该项目与点击位置的距离。我做了一些更新

请参阅更新的React

App.jsx
我添加了一个辅助对象，以有条件地从选定元素的边框顶部检查单击位置。遵循这些假设

  • 如果单击了第一个项目，只需选择第一个和第二个项目。
    [A]
  • 如果单击了最后一项，请选择最后一项和最后第二项<代码>[B]
    • 对于列表中间的元素，如果点击项目的边界矩形的上半部分点击“代码> > [C] ，则选择前一个项目作为第二个选择，否则选择前一个项目。代码>[D]

    编辑2 在您的注释中，您说列表有行和列：（您可以使用
    getBoundingClientRect（）.left和width
    ，扩展辅助对象以说明水平接近度，并使用相同的方法选择最靠近单击的一侧的项目索引

    编辑3 删除了下一个选定项目不依赖于鼠标单击位置的方法，但代码可以在本文的这一部分和

    我已经读了你的问题，所以你有3个元素，你想要的是如果你点击元素的上面部分，上面和下面的一个都会高亮显示，同样的，如果你点击元素的下面部分，上面和下面的一个都会高亮显示 对于这个功能，我测试了一个jQuery代码

    <script>
$(document).ready(function(){
  $(".oneEbottom").on("click", function(event){
    $(event.delegateTarget).css("background-color", "red");
    $(".twoE").css("background-color", "red");
    $(".oneE").css("background-color", "red");
    $(".threeE").css("background-color", "white");
  });

  $(".twoEabove").on("click", function(event){
    $(event.delegateTarget).css("background-color", "red");
    $(".oneE").css("background-color", "red");
    $(".twoE").css("background-color", "red");
    $(".threeE").css("background-color", "white");
  });

  $(".twoEbottom").on("click", function(event){
    $(event.delegateTarget).css("background-color", "red");
    $(".threeE").css("background-color", "red");
    $(".twoE").css("background-color", "red");
    $(".oneE").css("background-color", "white");
  });

  $(".threeEabove").on("click", function(event){
    $(event.delegateTarget).css("background-color", "red");
    $(".threeE").css("background-color", "red");
    $(".twoE").css("background-color", "red");
     (".oneE").css("background-color", "white");
  });
});
</script>

    
$（文档）.ready（函数（）{
$（.onebottom”）。在（“单击”上，函数（事件）{
$（event.delegateTarget）.css（“背景色”、“红色”）；
$（“.twoE”）.css（“背景色”、“红色”）；
$（“.oneE”）.css（“背景色”、“红色”）；
$（“.three”）.css（“背景色”、“白色”）；
});
$（.twoEabove”）。在（“单击”上，函数（事件）{
$（event.delegateTarget）.css（“背景色”、“红色”）；
$（“.oneE”）.css（“背景色”、“红色”）；
$（“.twoE”）.css（“背景色”、“红色”）；
$（“.three”）.css（“背景色”、“白色”）；
});
$（.twoEbottom”）。在（“单击”上，函数（事件）{
$（event.delegateTarget）.css（“背景色”、“红色”）；
$（“.three”）.css（“背景色”、“红色”）；
$（“.twoE”）.css（“背景色”、“红色”）；
$（“.oneE”）.css（“背景色”、“白色”）；
});
$（.ThreeAbove”）。在（“单击”上，函数（事件）{
$（event.delegateTarget）.css（“背景色”、“红色”）；
$（“.three”）.css（“背景色”、“红色”）；
$（“.twoE”）.css（“背景色”、“红色”）；
（“.oneE”）.css（“背景色”、“白色”）；
});
});
    您可以使用这个简单的脚本来实现这个功能，但是您必须在标记中链接jQuery文件

    <head>

<style>
.a {
    border: 1px solid #000;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>






<div class="oneE a" >
<div class="oneEinner">Element 1</div>
<div class="oneEbottom s"><small>to highlight Element 1 & 2</small></div>
</div>

<div class="twoE a">
    <div class="twoEabove s"><small>to highlight Element 1 & 2</small></div>
    <div class="twoEinner">Element 2</div>
    <div class="twoEbottom s"><small>to highlight Element 2 & 3</small></div>
</div>

<div class="threeE a">
<div class="threeEabove s"><small>to highlight Element 2 & 3</small></div>
<div class="threeEinner">Element 3</div>
</div>


    
.a{
边框：1px实心#000；
}
要素1
突出显示元素1和2
突出显示元素1和2
要素2
突出显示元素2和3
突出显示元素2和3
要素3
    如您所见，为了获得更多的澄清，我在每个部分中都放了一个小文本，以便在您要单击它时检查上面和底部，您可以删除它。这仅用于测试目的

    我仅使用javascript创建了一个解决方案

    在这种方法中，我也使用了事件冒泡概念。 你可以在

    DOM的重要方法（javascript）：

    • 检查您的div是否有类（例如：活动） event.target.classList.contains（“活动”）
    • 下一个同级元素event.target.nextElementSibling
    • 上一个同级元素event.target.PreviousElement同级元素
    • 添加类事件.目标.类列表.添加（“活动”）
    • 删除类事件.目标.类列表.删除（“活动”）
    HTML

      <div id="myClassWrapper">
     <div class="myClass">Elem 1</div>
     <div class="myClass">Elem 2</div>
     <div class="myClass">Elem 3</div>
  </div>
    你在项目中也使用jquery吗？使用react，所以jquery很好，你有什么想法吗？@Drew，你是说选择两个相邻的元素，还是单击一个元素来选择它，然后在单击时自动选择它的邻居？@iamcastelli如果我单击elem 1，然后自动，你的第一句话就可以了ly的下一个邻居elem2会被选中吗？这只是jquery的下一个问题，因为如果用户单击Elem 2，它应该取决于使用getBoundingClientRect的最近的div Elem 1或Elem 2，我将设置一个高度来解决这个问题。所以现在应该单击Elem 3以突出显示Elem 2，而不是相反。比如如果我点击 
    <head>

<style>
.a {
    border: 1px solid #000;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>






<div class="oneE a" >
<div class="oneEinner">Element 1</div>
<div class="oneEbottom s"><small>to highlight Element 1 & 2</small></div>
</div>

<div class="twoE a">
    <div class="twoEabove s"><small>to highlight Element 1 & 2</small></div>
    <div class="twoEinner">Element 2</div>
    <div class="twoEbottom s"><small>to highlight Element 2 & 3</small></div>
</div>

<div class="threeE a">
<div class="threeEabove s"><small>to highlight Element 2 & 3</small></div>
<div class="threeEinner">Element 3</div>
</div>


      <div id="myClassWrapper">
     <div class="myClass">Elem 1</div>
     <div class="myClass">Elem 2</div>
     <div class="myClass">Elem 3</div>
  </div>

        var selectedElements = 0;
    var myClassWrapper = document.getElementById('myClassWrapper');
        myClassWrapper.addEventListener("click", function(event){
    var isMyClassClicked = event.target.classList.contains("myClass");


    if(isMyClassClicked){
      var isActive = event.target.classList.contains("active");
      if(isActive){
       //Do Unselect
       event.target.classList.remove("active");
       selectedElements--;
      }
      else{
        //Do Select
        //1.Check selectedElemnts not equal to 2
        if(selectedElements == 2) alert('You already selected two elements');
         if(selectedElements == 1){
         //check neighbour has active or not
         var isNextElemActive = event.target.nextElementSibling ? event.target.nextElementSibling.classList.contains("active") : false;
         var isPrevElemActive = event.target.previousElementSibling ? event.target.previousElementSibling.classList.contains("active") : false;
         if(isNextElemActive || isPrevElemActive){
           event.target.classList.add("active");
           selectedElements++;
         }else{
           alert("you can't select it");
         }
        }
        if(selectedElements == 0){
          event.target.classList.add("active");
          selectedElements++;
        }
       }
     }
   });