swiper 中內容無法被選中
popover 彈出框 在swiper中滑鼠移上顯示的div，裡面的文字無法複製，應該是swiper的事件阻止了，想要的效果是滑鼠移上一個圖示向上顯示一個div，滑鼠可以移動到div中複製內容，滑鼠移出div隱藏。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> slider1</div>
<div class="swiper-slide swiper-no-swiping"> slider2</div>
<div class="swiper-slide"> slider3</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{ noSwiping : true, })
</script>
文字可以被選中，但是slide無法拖拽，swiper失效。
後改效果為：原來popover的hover事件不變，加一個點選複製事件，滑鼠移上圖示，div顯示，滑鼠點選圖示，內容複製到剪下板，滑鼠移出圖示，div隱藏。
/*底下這部分程式碼應該是滑鼠移上div.popover 不消失，但是無法選取複製，好像popover-content的字型設定顏色為白色，給他設一個別的顏色看下*/
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover');
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
$("#phone").popover({
trigger: 'hover',
placement: 'top',
content:"+(86)15811472755",
delay: {
show: 50,
hide: 200
}
});
/* 點選複製程式碼 可以在網上找找，有好多的，我這個是找的，與上面程式碼無關*/
<div id="text" onclick="tapCopy()">職人鯊</div> <script>
//複製文字 function tapCopy() { selectText('text'); document.execCommand('copy'); alert('複製成功'); }
//選中文字 function selectText(element) { var text = document.getElementById(element); //做下相容 if (document.body.createTextRange) { //如果支援 var range = document.body.createTextRange(); //獲取range range.moveToElementText(text); //游標移上去 range.select(); //選擇 } else if (window.getSelection) { var selection = window.getSelection(); //獲取selection var range = document.createRange(); //建立range range.selectNodeContents(text); //選擇節點內容 selection.removeAllRanges(); //移除所有range selection.addRange(range); //新增range /*if(selection.setBaseAndExtent){ selection.setBaseAndExtent(text, 0, text, 1); }*/ } else { alert("複製失敗"); } } </script>
應該是可以實現滑鼠點選圖示 alert(複製成功)，原來popover 的trigger：hover還在
其實想實現的是滑鼠移上圖示 div.popover 顯示 點選div.popover alert（複製成功），alert的確定點選以後div.popover消失
其實就是很簡單的一個hover效果,根本就不需要引用popover
而且div.popover js好像獲取不到，
$(".popover").mouseover(function(){console.log(1)})
不列印，不知道為啥，而且這個div是在html的末尾
<div class="icon">ICON <div class="pop">我是一段文字</div> </div>
<style type="text/css"> .icon{ margin-top: 100px; background: #f90; color:#03ccbb; padding:5px; position: relative; text-align: center; } .pop{ padding:10px; position: absolute; top:100%; left:46%; background: #000; display: none; } .icon:hover .pop{ display: block; } </style>
其實主要的問題就是swiper下文字無法選取，無法複製，自己寫的div好像也是無法複製的，有段程式碼加上以後文字可以進行復制，好像是給body加監聽那個是可以點選別的地方然後popover消失，但是那個方法trigger：click ，點選body，div.popover是消失了，但是他的click事件還在，滑鼠移上以後還是在那裡顯示，再點選然後div.popover才消失，和hover衝突了，太麻煩了，最後我實現的效果是點選圖示alert(複製成功)，點選確定然後div.popover消失，滑鼠移上div.popover顯示就是無法複製。
在swiper外掛中使用輪播，想複製在輪播頁裡的文字內容，使用textarea 標籤來做想複製文字的容器，就可以使用瀏覽器正常的複製功能。 如：<textarea disabled class="email">[email protected]</textarea>
這是找的別人說的，具體沒有試過，可以嘗試一下。