යටින් පවතින මූලද්‍රව්‍යවලට div හරහා ක්ලික් කරන්න

මට දැන් ඇති divබව background:transparentසමග border. මේ යට div, මට තවත් අංග තිබේ.

දැනට, මම ආවරණයෙන් පිටත ක්ලික් කළ විට යටින් පවතින මූලද්‍රව්‍ය ක්ලික් කළ divහැකිය. කෙසේ වෙතත්, උඩිස්වරය මත කෙලින්ම ක්ලික් කිරීමේදී මට යටින් පවතින අංග ක්ලික් කළ නොහැක div.

මට අවශ්‍ය වන්නේ මේ හරහා ක්ලික් divකිරීමට මට හැකි වන අතර එමඟින් යටින් පවතින අංග මත ක්ලික් කළ හැකිය.

ඔව්, ඔබට පුළුවන්ද මේක කරන්න.

pointer-events: noneIE11 සඳහා CSS කොන්දේසි සහිත ප්‍රකාශ සමඟ භාවිතා කිරීම (IE10 හෝ ඊට පහළින් ක්‍රියා නොකරයි), ඔබට මෙම ගැටළුව සඳහා හරස් බ්‍රව්සරයට අනුකූල විසඳුමක් ලබා ගත හැකිය.

භාවිතා කිරීමෙන් AlphaImageLoader, ඔබට විනිවිද පෙනෙන .PNG/.GIFආවරණයක් උඩින් තැබිය හැකි අතර divයටින් ඇති මූලද්‍රව්‍ය වෙත ක්ලික් කිරීම් ගලා යා හැකිය.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 කොන්දේසි සහිත:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

සියලුම කේත සහිත මූලික උදාහරණ පිටුවක් මෙන්න .

දැන ගැනීමට ලැබීමත් සතුටක් ...
ඔබට මව් මූලද්‍රව්‍යයක (බොහෝ විට විනිවිද පෙනෙන බෙදීම්) දර්ශක සිදුවීම් අක්‍රිය කළ හැකි නමුත් එහි ළමා අංග සඳහා එය තවමත් සක්‍රීය කර ඇත.
මවු ස්ථර කිසිදු මූසික සිදුවීමකට කිසිසේත් ප්‍රතිචාර නොදක්වන අතරම, ඔබට ළමා මූලද්‍රව්‍ය ක්ලික් කිරීමට අවශ්‍ය වන බහු අතිච්ඡාදනය වන div ස්ථර සමඟ වැඩ කරන්නේ නම් මෙය ප්‍රයෝජනවත් වේ.

මේ සඳහා සියළුම දෙමාපිය බෙදීම් ලැබෙන pointer-events: noneඅතර එහි ක්ලික් කළ හැකි ළමයින්ට නැවත සිදුවීම් සක්‍රීය කරයිpointer-events: auto

.parent {
    pointer-events:none;        
}
.child {
    pointer-events:auto;
}

<div class="some-container">
   <ul class="layer-0 parent">
     <li class="click-me child"></li>
     <li class="click-me child"></li>
   </ul>

   <ul class="layer-1 parent">
     <li class="click-me-also child"></li>
     <li class="click-me-also child"></li>
   </ul>
</div>

divයටින් පවතින මූලද්‍රව්‍යයට ක්ලික් කිරීමට පරිශීලකයාට ඉඩ දීම බ්‍රව්සරය මත රඳා පවතී. ෆයර්ෆොක්ස්, ක්‍රෝම්, සෆාරි සහ ඔපෙරා ඇතුළු සියලුම නවීන බ්‍රව්සර් තේරුම් ගනී pointer-events:none.

IE සඳහා, එය පසුබිම මත රඳා පවතී. පසුබිම විනිවිද පෙනෙන නම්, ඔබට කිසිවක් කිරීමට අවශ්‍ය නොවී ක්ලික් කිරීම ක්‍රියාත්මක වේ. අනෙක් අතට, වැනි දෙයක් සඳහා background:white; opacity:0; filter:Alpha(opacity=0);, IE හට අතින් සිදුවීම් ඉදිරියට යැවීම අවශ්‍ය වේ.

බලන්න එය JSFiddle ටෙස්ට් හා CanIUse පහිටුම් දක්වනය සිද්ධීන් .

මම මෙම පිළිතුර එකතු කරන්නේ මා එය මෙහි සම්පූර්ණයෙන් නොදකින බැවිනි. මූලද්‍රව්‍ය ෆ්‍රොම්පොයින්ට් භාවිතයෙන් මට මෙය කිරීමට හැකි විය. එබැවින් මූලික වශයෙන්:

• ඔබට ක්ලික් කිරීමට අවශ්‍ය div එකට ක්ලික් කරන්න
• එය සඟවන්න
• දර්ශකය ක්‍රියාත්මක වන්නේ කුමන මූලද්‍රව්‍යයද යන්න තීරණය කරන්න
• එහි ඇති මූලද්‍රව්‍යය මත ක්ලික් කරන්න.

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

මගේ නඩුවේදී අතිච්ඡාදනය වන කොටස නියත වශයෙන්ම ස්ථානගත වී ඇත this මෙය වෙනසක් කරයිදැයි මට විශ්වාස නැත. මෙය අවම වශයෙන් IE8 / 9, සෆාරි ක්‍රෝම් සහ ෆයර්ෆොක්ස් මත ක්‍රියා කරයි.

1. මූලද්රව්යය උඩින් සඟවන්න
2. කර්සර ඛණ්ඩාංක තීරණය කරන්න
3. එම ඛණ්ඩාංකවල මූලද්රව්ය ලබා ගන්න
4. මූලද්රව්යය මත ක්ලික් කරන්න
5. අතිච්ඡාදනය වන අංගය නැවත පෙන්වන්න

$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});

මට මෙය කිරීමට අවශ්‍ය වූ අතර මෙම මාර්ගය ගැනීමට තීරණය කළෙමි:

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

මම දැනට කැන්වස් කථන බැලූන් සමඟ වැඩ කරමි. නමුත් දර්ශකය සහිත බැලූනය ඩිවි එකකින් ඔතා ඇති නිසා, එය යටතේ ඇති සමහර සබැඳි තවදුරටත් ක්ලික් කළ නොහැක. මට මේ අවස්ථාවේ දී extjs භාවිතා කළ නොහැක. මගේ කථන බැලූන් නිබන්ධනයට මූලික උදාහරණය බලන්න HTML5

එබැවින් බැලූන් ඇතුළත සිට සියලු සම්බන්ධක ඛණ්ඩාංක අරාවකින් එකතු කිරීමට මම තීරණය කළෙමි.

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

මම මෙම ශ්‍රිතය එක් එක් (නව) බැලූනයක අමතන්නෙමි. එය සබැඳි පන්තියක වම් / ඉහළ සහ දකුණේ / පහළ කොන් වල ඛණ්ඩාංක ග්‍රහණය කරගනී - ඊට අමතරව යමෙකු එම ඛණ්ඩාංක මත ක්ලික් කළහොත් කුමක් කළ යුතුද යන්න සඳහා වන නාම ලක්ෂණය වන අතර මම 1 ක් සැකසීමට ප්‍රිය කළෙමි. . මෙම අරාව ක්ලික් කරාරයට මාරු කරන්න. ඔබට තල්ලුවද භාවිතා කළ හැකිය.

එම අරාව සමඟ වැඩ කිරීමට:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

මෙම ක්‍රියාව මඟින් බොඩි ක්ලික් සිදුවීමක ඛණ්ඩාංක හෝ එය දැනටමත් ක්ලික් කර තිබේද යන්න සනාථ කරයි. ගැඹුරට යෑම අවශ්‍ය නොවන බව මම සිතමි, නමුත් එය එතරම් සංකීර්ණ නොවන බව ඔබට පෙනේ. බලාපොරොත්තුව ප්‍රීතිමත් විය ...

එය එසේ ක්‍රියා නොකරයි. අවට ඇති කාර්යය නම් එක් එක් මූලද්‍රව්‍යය වාඩිලාගෙන සිටින ප්‍රදේශයට එරෙහිව මූසික ක්ලික් කිරීමේ ඛණ්ඩාංක අතින් පරීක්ෂා කිරීමයි.

මූලද්‍රව්‍යයක් වාසය කරන ප්‍රදේශය 1. මගින් සොයාගත හැකිය 1. පිටුවේ ඉහළ වමට සාපේක්ෂව මූලද්‍රව්‍යයේ පිහිටීම ලබා ගැනීම සහ 2. පළල සහ උස. jQuery වැනි පුස්තකාලයක් මෙය සරල කරයි, එය සරල js වලින් කළ හැකි වුවද. සඳහා අවස්ථාව හසුරුවන්නා එකතු mousemoveමත documentවස්තුව පිටුවේ ඉහළ හා වමේ සිට මූසිකය තත්ත්වය අඛණ්ඩ යාවත් සැපයීමට ඇත. මූසිකය කිසියම් වස්තුවකට වඩා ඉහළින් තිබේදැයි තීරණය කිරීම, මූසිකයේ පිහිටීම මූලද්‍රව්‍යයක වම්, දකුණ, ඉහළ සහ පහළ දාර අතර තිබේදැයි පරීක්ෂා කිරීම සමන්විත වේ.

නැත, ඔබට මූලද්‍රව්‍යයක් හරහා 'හරහා' ක්ලික් කළ නොහැක. ඔබට ක්ලික් කිරීමේ ඛණ්ඩාංක ලබා ගත හැකි අතර ක්ලික් කළ මූලද්‍රව්‍යයට යටින් ඇති මූලද්‍රව්‍යය කුමක්දැයි සොයා බැලීමට උත්සාහ කළ හැකිය, නමුත් නැති බ්‍රව්සර් සඳහා මෙය ඇත්තෙන්ම වෙහෙසකරය document.elementFromPoint. ක්ලික් කිරීමේ පෙරනිමි ක්‍රියාව අනුකරණය කිරීමට ඔබට තවමත් සිදුවේ, එය ඔබට එහි ඇති මූලද්‍රව්‍ය මත පදනම්ව සුළුපටු නොවේ.

ඔබට සම්පුර්ණයෙන්ම විනිවිද පෙනෙන කවුළු ප්‍රදේශයක් ඇති බැවින්, පිටත වටේ වෙනම මායිම් අංගයක් ලෙස එය ක්‍රියාත්මක කිරීමට වඩා හොඳ වනු ඇත, මධ්‍ය ප්‍රදේශය බාධාවකින් තොරව තබන අතර එවිට ඔබට කෙළින්ම ක්ලික් කළ හැකිය.

උත්සාහ කිරීමට තවත් අදහසක් වනුයේ (අවස්ථාවාදී):

1. ඔබට අවශ්‍ය අන්තර්ගතය කොටසකට දමන්න;
2. ක්ලික් නොකල ආවරණයක් මුළු පිටුව පුරා z- දර්ශකයක් ඉහළින් තබන්න,
3. මුල් කොට් of ාශයේ තවත් කැපූ පිටපතක් සාදන්න
4. ඊටත් වඩා ඉහළ z- දර්ශකයක් සමඟ ක්ලික් කළ හැකි මුල් අන්තර්ගතයට සමාන පිටපතක් පිටපත් කරන්න.

සිතුවිලි තිබේද?

ඔබේ සලකුණු වෙනස් කිරීම ගැන සලකා බැලිය හැකි යැයි මම සිතමි. මම වැරදියි නම්, ලේඛනයට ඉහළින් අදෘශ්‍යමාන තට්ටුවක් දැමීමට ඔබ කැමති අතර ඔබේ අදෘශ්‍යමාන සලකුණු කිරීම ඔබේ ලේඛන රූපයට පෙර විය හැකිය (මෙය නිවැරදි ද?).

ඒ වෙනුවට, මම යෝජනා කරන්නේ ඔබ නොපෙනෙන දේ ලේඛන රූපයට පසුව තැබිය යුතු නමුත් ස්ථානය නිරපේක්ෂ ලෙස වෙනස් කරන ලෙසයි.

ඔබට තනතුරක් ලබා ගැනීමට මව් අංගයක් අවශ්‍ය බව සලකන්න: සාපේක්ෂ සහ පසුව ඔබට මෙම අදහස භාවිතා කිරීමට හැකි වනු ඇත. එසේ නොමැතිනම් ඔබේ නිරපේක්ෂ ස්තරය ඉහළ වම් කෙළවරේ තබනු ඇත.

ස්ථිතික හැර වෙනත් ස්ථානයක් ඇති පළමු මව් මූලද්‍රව්‍යයට සාපේක්ෂව නිරපේක්ෂ පිහිටුම් මූලද්‍රව්‍යයක් ස්ථානගත කර ඇත. එවැනි මූලද්රව්යයක් සොයාගත නොහැකි නම්, අඩංගු කොටස html වේ

මෙය උපකාරී වේ යැයි සිතමි. CSS ස්ථානගත කිරීම පිළිබඳ වැඩි විස්තර සඳහා මෙහි බලන්න .

aනිදසුනක් ලෙස, සියලු HTML සාරය වටා ටැගය ඔතා

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

මගේ උදාහරණයේ දී, මගේ ශීර්ෂ පා class ය දර්ශක සිදුවීම් සමඟ හෝවර් බලපෑම් ඇති කරයි : කිසිවක් නැත; ඔබට අහිමි වනු ඇත

අන්තර්ගතය එතීමෙන් ඔබේ හෝවර් ප්‍රයෝග රඳවා තබා ගත හැකි අතර ඔබට සියලු පින්තූරයේ ක්ලික් කළ හැකිය .

ඔබට AP ආවරණයක් තැබිය හැකිය ...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

ඔබට අවශ්‍ය නැති තැනට එය දමන්න. සියල්ලෙහිම ක්රියා කරයි.

දත්ත යූආර්අයි භාවිතා කරමින් විනිවිද පෙනෙන පසුබිම් රූපය පහත පරිදි දැක්වීමට පහසු ක්‍රමයක් වනු ඇත:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

මම හිතන්නේ event.stopPropagation();මෙහි ද සඳහන් කළ යුතුය. ඔබගේ බොත්තම ක්ලික් කිරීමේ කාර්යයට මෙය එක් කරන්න.

DOM ගස බුබුලු දැමීමෙන් සිදුවීම වළක්වයි, මව් හසුරුවන්නන් හට සිද්ධිය පිළිබඳව දැනුම් දීම වළක්වයි.

මෙය ප්‍රශ්නයට නිවැරදි පිළිතුරක් නොවන අතර ඒ සඳහා විසඳුමක් සොයා ගැනීමට උපකාරී වේ.

අජැක්ස් ඇමතුමක රැඳී සිටින විට මම පිටු පැටවීමේදී සහ දර්ශනය වන රූපයක් මා සතුව තිබුනද නැවත සැඟවී ඇත ...

පිටුව පූරණය කිරීමේදී මගේ රූපය ප්‍රදර්ශනය කළ හැකි එකම ක්‍රමය මම සොයා ගත් අතර එය අතුරුදහන් කර එය සැඟවීමට පෙර රූපය තිබූ ස්ථානය ක්ලික් කිරීමට හැකි වූයේ රූපය DIV එකකට දැමීම, DIV 10x10 පික්සල් ප්‍රමාණය හෝ කුඩා කිරීම එය ගැටළුවක් ඇතිවීම වලක්වා ගැනීමට ප්‍රමාණවත් වන අතර පසුව එහි අඩංගු ඩී. මෙමඟින් රූපය දෘශ්‍යමානව තිබියදී ඩිවි එක පිටාර ගැලීමට ඉඩ දී ඇති අතර, ඩිව් සැඟවුණු විට, ඩිව්ස් ප්‍රදේශයට පමණක් බලපා ඇත්තේ යටින් ඇති වස්තූන් ක්ලික් කිරීමට නොහැකි වීම මිස ඩීඅයිවී අඩංගු සහ ප්‍රදර්ශනය කරමින් තිබූ රූපයේ සම්පූර්ණ ප්‍රමාණය නොවේ.

CSS display = none / block, opacity = 0 ඇතුළුව රූපය සැඟවීමට මම සියලු ක්‍රම අත්හදා බැලුවෙමි. ඒ සියල්ලේ ප්‍රති ulted ලය වූයේ මගේ ප්‍රතිරූපය සැඟවී තිබීමයි. නමුත් එය දර්ශනය වන ප්‍රදේශය යටින් ඇති දේවල් ආවරණය කර ඇති ආකාරයට ක්‍රියා කිරීම සඳහා ක්ලික් කිරීම් සහ යනාදිය යටින් පවතින වස්තූන් මත ක්‍රියා නොකරයි. රූපය ඉතා කුඩා ඩීඅයිවී එකක් තුළ තිබී මම කුඩා ඩීඅයිවී සඟවා ගත් පසු, රූපය වාඩිලාගෙන සිටි මුළු ප්‍රදේශයම පැහැදිලි වූ අතර මා සැඟවී ඇති ඩීඅයිවී යටතේ ඇති කුඩා ප්‍රදේශයට පමණක් බලපා ඇති නමුත් මම එය ප්‍රමාණවත් තරම් කුඩා කළ විට (පික්සල් 10x10), ගැටළුව සවි කර ඇත (වර්ග කිරීම).

මෙය සරල කාරණයක් විය යුතු දේ සඳහා අපිරිසිදු විසඳුමක් බව මට පෙනී ගිය නමුත් බහාලුමක් නොමැතිව වස්තුව ස්වදේශීය ආකෘතියෙන් සැඟවීමට කිසිදු ක්‍රමයක් සොයා ගැනීමට මට නොහැකි විය. මගේ වස්තුව යනාදිය ස්වරූපයෙන් විය. යමෙකුට වඩා හොඳ ක්‍රමයක් තිබේ නම් කරුණාකර මට දන්වන්න.