填充导致错误按钮被触发？

时间：2016-01-01 22:14:23

标签： javascript jquery html css

所以我试图将按钮放在img元素上。我已经能够使用一些CSS，但为了让它们垂直放置，我使用了填充。这似乎导致正确的按钮触发问题。似乎唯一的图标就是moveDown图标。这似乎是由于使用了填充。

有什么想法吗？ 

  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)

    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
    })
  }
  moveItUp();
  moveItDown();
  
    .track img {
      position: relative;
      float: left;
      height: 75px;
      border-radius: 0px;
      
    }
    .soundMove{
      position: relative;
      text-align: center;
      font-size: 2.5em; 
       
    }
     
    .moveUp{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: -10;
      z-index: 10;
      padding-left: 15px;
      color: white !important;
    }
    .moveDown{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 0;
      padding-top: 35px;
      padding-left: 15px;
      z-index: 10;
       color: white !important;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
          <div class='track' id='test'>
            <div class="soundMove">
            <i class="moveUp fa fa-arrow-up"></i>
            <i class="moveDown fa fa-arrow-down"></i> 
             </div>
            <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
          </div>
    </div>

HTML 

<div id="queueList" class="queueListDiv col-md-4">
      <div class='track' id='test'>
        <div class="soundMove">
        <i class="moveUp fa fa-arrow-up"></i>
        <i class="moveDown fa fa-arrow-down"></i> 
         </div>
        <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
      </div>
</div>

CSS 

.track img {
  position: relative;
  float: left;
  height: 75px;
  border-radius: 0px;

}
.soundMove{
  position: relative;
  text-align: center;
  font-size: 2.5em; 

}

.moveUp{

  cursor: pointer;
  position: absolute;
  left: 0;
  top: -10;
  z-index: 10;
  padding-left: 15px;
  color: white !important;
}
.moveDown{

  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 35px;
  padding-left: 15px;
  z-index: 10;
   color: white !important;
}

JS 

  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)
      console.log(queueList)
      arrayMoveUp(queueList, moveUpId)
      console.log(queueList)
    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
      console.log(queueList);
      arrayMoveDown(queueList, moveDownId)
      console.log(queueList);
    })
  }

这是小提琴https://jsfiddle.net/m6wm8jcf/

2 个答案:

答案 0 :(得分：1)

好的，我想你可以做到这一点。

function arrayMoveDown(arr, fromIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(fromIndex + 1, 0, element)
}

function arrayMoveUp(arr, fromIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(fromIndex - 1, 0, element)
}
function moveItUp() {
  $(".moveUp").off("click").on("click", function() {
    var moveUpId = $(this).closest("div").attr("id");
    console.log("moveupClicked")
    console.log(moveUpId)
  });
}
function moveItDown() {
  $(".moveDown").off("click").on("click", function() {
    var moveDownId = $(this).closest("div").attr("id");
    console.log("moveDownClicked")
  });
}

moveItUp();
moveItDown();
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
.track {position: relative;}
.track img {
  height: 75px;
  border-radius: 0px;
}
.soundMove{
  font-size: 2em;
}

.moveUp{
  cursor: pointer;
  position: absolute;
  top: 5px;
  z-index: 10;
  left: 15px;
  color: white !important;
}
.moveDown {
  cursor: pointer;
  position: absolute;
  left: 0;
  bottom: 5px;
  left: 15px;
  z-index: 10;
  color: white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
  <div class='track' id='test'>
    <div class="soundMove">
      <i class="moveUp fa fa-arrow-up"></i>
      <i class="moveDown fa fa-arrow-down"></i> 
    </div>
    <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
  </div>
</div>

答案 1 :(得分：1)

关于导致按钮窃取click事件的填充，你是正确的。

要更正此问题，请使用position: absolute和top:35px定位按钮。

＆＃13;
＆＃13; 
  function moveItUp() {
    $(".moveUp").off("click").on("click", function() {
      var moveUpId = $(this).closest("div").attr("id");
      console.log("moveupClicked")
      console.log(moveUpId)

    })
  }
  function moveItDown() {
    $(".moveDown").off("click").on("click", function() {
      var moveDownId = $(this).closest("div").attr("id");
      console.log("moveDownClicked")
    })
  }
  moveItUp();
  moveItDown();
＆＃13; 
    .track {
      position: relative;
      display: inline-block;
      height: 75px;
    }
    .track img {
      position: relative;
      float: left;
      height: 75px;
      border-radius: 0px;
      
    }
    .soundMove{
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 2.5em; 
       
    }
     
    .moveUp{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: -10;
      z-index: 10;
      padding-left: 15px;
      color: white !important;
    }
    .moveDown{
    
      cursor: pointer;
      position: absolute;
      left: 0;
      top: 35px;
      padding-left: 15px;
      z-index: 10;
       color: white !important;
    }
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="queueList" class="queueListDiv col-md-4">
          <div class='track' id='test'>
            <div class="soundMove">
            <i class="moveUp fa fa-arrow-up"></i>
            <i class="moveDown fa fa-arrow-down"></i> 
             </div>
            <img src="https://i1.sndcdn.com/artworks-000134901706-qotldu-large.jpg" />
          </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题