精华内容
下载资源
问答
  • 解决file文件document.querySelector('input[type=“file”]).value=“C:\fakepath” ...div class="headPortrait"> <div>请选择头像</div> <input type="file" hidden name="image"> ...

    解决file文件document.querySelector('input[type=“file”]).value=“C:\fakepath”
    在这里插入图片描述
    代码示例:

    <div class="headPortrait">
         <div>请选择头像</div>  
         <input type="file" hidden name="image">
     </div>
    
    (function() {
        const div = document.getElementsByClassName('headPortrait')[0];
        const file = document.querySelector('input[type="file"]');
        function fn() {
            file.oninput = function(){
                if(file.files && file.files[0]) {
                    //  读取文件对象
                    let reader = new FileReader();
                    reader.onload = function(evt) {
                        let src = evt.target.result;
                        const img = document.createElement('img');
                        div.appendChild(img);
                        img.src = src;
                    }
                    // 将文件读取为 DataURL
                    reader.readAsDataURL(file.files[0]);
                }
            }
        }
        div.addEventListener('click', function (e) {
            // file模拟input点击事件
            var evt = new MouseEvent("click", {
                bubbles: false,
                cancelable: true,
                view: window,
            });
            file.dispatchEvent(evt,fn());
        }, false);
    })()
    
    展开全文
  • I'm using jQuery in my site and I would like to trigger certain actions when a certain div is made

    本文翻译自:jQuery event to trigger action when a div is made visible

    I'm using jQuery in my site and I would like to trigger certain actions when a certain div is made visible. 我在我的网站中使用jQuery,并且当某个div可见时我想触发某些操作。

    Is it possible to attach some sort of "isvisible" event handler to arbitrary divs and have certain code run when they the div is made visible? 是否有可能将某种“isvisible”事件处理程序附加到任意div并且在div可见时运行某些代码?

    I would like something like the following pseudocode: 我想要像下面的伪代码:

    $(function() {
      $('#contentDiv').isvisible(function() {
        alert("do something");
      });
    });
    

    The alert("do something") code should not fire until the contentDiv is actually made visible. 在实际使contentDiv可见之前,不应触发警报(“执行某些操作”)代码。

    Thanks. 谢谢。


    #1楼

    参考:https://stackoom.com/question/58hi/当div可见时触发动作的jQuery事件


    #2楼

    You can use jQuery's Live Query plugin . 您可以使用jQuery的Live Query插件 And write code as follows: 并编写如下代码:

    $('#contentDiv:visible').livequery(function() {
        alert("do something");
    });
    

    Then everytime the contentDiv is visible, "do something" will be alerted! 然后,每当contentDiv可见时,“做某事”都会被警告!


    #3楼

    There is no native event you can hook into for this however you can trigger an event from your script after you have made the div visible using the . 没有您可以为此挂钩的本机事件,但是您可以在使用了可见div后从脚本中触发事件。 trigger function 触发功能

    eg 例如

    //declare event to run when div is visible
    function isVisible(){
       //do something
    
    }
    
    //hookup the event
    $('#someDivId').bind('isVisible', isVisible);
    
    //show div and trigger custom event in callback when div is visible
    $('#someDivId').show('slow', function(){
        $(this).trigger('isVisible');
    });
    

    #4楼

    redsquare's solution is the right answer. redsquare的解决方案是正确的答案。

    But as an IN-THEORY solution you can write a function which is selecting the elements classed by .visibilityCheck ( not all visible elements ) and check their visibility property value; 但作为IN-THEORY解决方案,您可以编写一个函数,选择.visibilityCheck并非所有可见元素 )分类的元素,并检查它们的visibility属性值; if true then do something. 如果是true那么做点什么。

    Afterward, the function should be performed periodically using the setInterval() function. 之后,应使用setInterval()函数定期执行该函数。 You can stop the timer using the clearInterval() upon successful call-out. 成功调出后,您可以使用clearInterval()停止计时器。

    Here's an example: 这是一个例子:

    function foo() {
        $('.visibilityCheck').each(function() {
            if ($(this).is(':visible')){
                // do something
            }
        });
    }
    
    window.setInterval(foo, 100);
    

    You can also perform some performance improvements on it, however, the solution is basically absurd to be used in action. 您也可以对其进行一些性能改进,但是,解决方案基本上是荒谬的,无法使用。 So... 所以...


    #5楼

    You could always add to the original .show() method so you don't have to trigger events every time you show something or if you need it to work with legacy code: 您始终可以添加到原始.show()方法,这样您就不必在每次显示某些内容时触发事件,或者如果需要它来处理遗留代码:

    Jquery extension: Jquery扩展:

    jQuery(function($) {
    
      var _oldShow = $.fn.show;
    
      $.fn.show = function(speed, oldCallback) {
        return $(this).each(function() {
          var obj         = $(this),
              newCallback = function() {
                if ($.isFunction(oldCallback)) {
                  oldCallback.apply(obj);
                }
                obj.trigger('afterShow');
              };
    
          // you can trigger a before show if you want
          obj.trigger('beforeShow');
    
          // now use the old function to show the element passing the new callback
          _oldShow.apply(obj, [speed, newCallback]);
        });
      }
    });
    

    Usage example: 用法示例:

    jQuery(function($) {
      $('#test')
        .bind('beforeShow', function() {
          alert('beforeShow');
        }) 
        .bind('afterShow', function() {
          alert('afterShow');
        })
        .show(1000, function() {
          alert('in show callback');
        })
        .show();
    });
    

    This effectively lets you do something beforeShow and afterShow while still executing the normal behavior of the original .show() method. 这有效地允许您在beforeShow和afterShow之前执行某些操作,同时仍然执行原始.show()方法的正常行为。

    You could also create another method so you don't have to override the original .show() method. 您还可以创建另一个方法,这样就不必重写原始的.show()方法。


    #6楼

    The problem is being addressed by DOM mutation observers . DOM突变观察者正在解决这个问题。 They allow you to bind an observer (a function) to events of changing content, text or attributes of dom elements. 它们允许您将观察者(函数)绑定到更改dom元素的内容,文本或属性的事件。

    With the release of IE11, all major browsers support this feature, check http://caniuse.com/mutationobserver 随着IE11的发布,所有主流浏览器都支持此功能,请访问http://caniuse.com/mutationobserver

    The example code is a follows: 示例代码如下:

     $(function() { $('#show').click(function() { $('#testdiv').show(); }); var observer = new MutationObserver(function(mutations) { alert('Attributes changed!'); }); var target = document.querySelector('#testdiv'); observer.observe(target, { attributes: true }); }); 
     <div id="testdiv" style="display:none;">hidden</div> <button id="show">Show hidden div</button> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

    展开全文
  • 求教,如何用js实现 在div样式改变时触发事件,现在一个div本来是隐藏的,我想在它显示的时候触发一个事件
  • 当某一div块区域,设定了固定高度,和overfloat滚动后,要进行滚动到区域底部后的加载或其他操作,需要知道何时到达底部,此代码解决了这个问题
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery实现点击里层div事件,不触发外面的div的点击事件</title>...div id="outter" styl...
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>JQuery实现点击里层div事件,不触发外面的div的点击事件</title>
    	</head>
     
    	<body>
    		<div id="outter" style="background-color: #DDDDDD; width: 400px; height: 200px; margin: 0px auto;">
    			<div id="inner" style="background-color: #ffffff; width: 300px; height: 100px; margin-left: 50px;">点击这里并不让外层的div事件触发</div >
    		</div>
    	</body>
     	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				$("#outter").bind('click', function(event) {
    					alert('外层的div被点击了!');
    				});
    				$("#inner").bind('click', function(e) {
    				//区分不同浏览器内核情况
    					var e = window.event || e;
            			if (e.stopPropagation) e.stopPropagation();
            			else e.cancelBubble = true;
    					alert('里面的div被点击了,但是不触发外层div的事件。');
    				});
    			});
    		</script>
    </html>
    
    展开全文
  • 情况如下:     ... 外层的div有一个点击跳转事件,按钮div也是一个点击事件用来隐藏整个div...解决方法: 在子级div上增加一个事件 onClick="event.cancelBubble = true",这样就可以只触发自身的点击事件了

    情况如下:  

      <div class="footfixed" style="cursor:pointer" οnclick="toAdvertDetail('${appPath}home/showNewsDetail?newsId=4');" >
    <div class="close" onClick="event.cancelBubble = true"> </div>
       </div>
    <!-- 底部悬浮end -->


       外层的div有一个点击跳转事件,按钮div也是一个点击事件用来隐藏整个div,产生的问题是,点击了关闭按钮了同事会触发父级div的跳转事件,



    解决方法: 在子级div上增加一个事件 onClick="event.cancelBubble = true",这样就可以只触发自身的点击事件了

    展开全文
  • 原本的单选按钮只能点击那个小圆才能触发,现在需求点击按钮所在的div触发单选按钮。 这是一次vue开发的需求,但可以举一反三到其他开发当中去。 原来的效果: 原来的代码: <div class="tempStyle"> <...
  • 利用JS做到隐藏div显示div

    千次阅读 2016-01-29 19:43:42
    div的visibility可以控制div显示和隐藏,但是隐藏后页面显示空白 Js代码 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";//隐藏 document.getElementById...
  • 点击div区域之外,触发事件

    千次阅读 2017-07-07 08:49:22
     <div class="_div">   onfocus="inputOnfocus()" onkeyup="keyPress()" placeholder="请输入姓名/班级/性别/家庭地址等关键字查询学生" class="form-control inline">//输入框id为keywords  百度一下" ...
  • 效果描述:点击a标签1,触发事件open(obj),显示div内容1,点击a标签2,隐藏div内容1,并显示div内容2……js代码:&lt;script language="javascript"&gt; function opens(obj) { for (var i =...
  • jquery点击div以外的区域触发事件

    千次阅读 2019-10-03 04:04:34
    <script type="text/javascript" src="cxx/jquery.min.js"></script> 13 <script type="text/javascript"> 14 function toggle(id) 15 { 16 var id = document.getElementById(id); 17 if (id....
  • 恩,以前搜索问题的时候,在csdn博客这个大家庭中收获甚多,鉴于写过的代码很快就会忘,放到...右侧的下拉框不会显示选择的,其后使用select来做(附上原先的代码) 点击超链接显示隐藏div $(docum
  • div class="main"> <div class="menu"></div> <div class="banner"></div> <div class="news"></div> <div class="video"></div> <div class="banner"&...
  • JS控制DIV显示隐藏

    万次阅读 2011-08-02 14:16:14
    div隐藏与显示 #menus { background-color: #c4cff0; } function Layer_HideOrShow(cur_div) { var current=document.getEl
  • 点击div触发select

    2020-03-04 17:49:44
    点击div触发select 问题描述 图片: 原始方法:点击select调起option选择项——这里使用select但是将其默认样式去除了,因为原始样式不符合UI设计,所以使用了一个img的箭头图片。现在实现的功能就是只有点击select...
  • 我项目中需要实现的效果大致如下图所示: 大致实现的思路如下: // 点击任意地方实现保存...$('.policyWhiteShow input').bind("click",function(event){ event=event||window.event;... event.stopPropagation()...
  • JS实现的简单的div切换显示

    千次阅读 2017-10-16 15:09:27
    JS实现的简单的div切换显示
  • 1.directive.js import Vue from 'vue' // 提交验证 Vue.directive('clickOutside', { // 初始化指令 bind(el, binding, vnode) { function clickHandler(e) { // 这里判断点击的元素是否是本身,是本身,则...
  • 鼠标移入移出事件 只有在鼠标指针穿过被选元素触发,子元素不触发 mouseenter移入 mouseleave移出 ```javascript $('.s-newslines').on({ mouseenter : function(){ $(this).next('.line1').animate({width:'...
  • <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div> <div class="dd-handle" id="li_Early_Disposal">先期处置</div> <div class="dd-handle" id="li_...
  • 我主要是想实现一个浮动窗体,当触发某种事件后div显示出来(默认为隐藏的),等几秒后又会隐藏,但是当鼠标进入该div后,div又一直显示,离开后才会慢慢隐藏,这该怎么实现呢,有人知道吗?? 我的代码如下: #...
  • 需要先触发touchstart事件(旧版本需要先触发mousedown事件) mui.trigger($('.mui-tab-item').eq(1)[0],'touchstart'); mui.trigger($('.mui-tab-item').eq(1)[0],'tap') 源代码尚未研究 以上为...
  • 目的:当鼠标在第一个 div 中移动,可以在第二个 div 中会显示鼠标对应的坐标值 一、创建两个 div 元素并为其设置 CSS 样式,如下图: 运行效果,如下图: 二、书写 JavaScript 部分,先获取两个 div 元素,如...
  • JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法。 原生 js 直接作为方法调用即可触发。 jquery 通过 trigger() 方法触发点击事件。 使用前提是该 dom 元素必须绑定的事件才能...
  • 同遮盖层划入一样,单纯的遮盖层划出的话算的上是非常简单了,但是在这里它却就不这么简单了,而且我前面还选了个比较麻烦的生成div,而不是显示存在的div,这里有那么几点需要特别注意: 1、遮盖层出现后,鼠标哪怕...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head>...div onclick="aa(1);" style="width: 200px;height: 20...
  • 一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;"> <div id="di...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 162,751
精华内容 65,100
关键字:

divjs显示时触发