开发中问题总结

兔博主这一阵在北京实习前端,虽然晚上不加班单还是没有时间更新博客,平常开发中的小问题解决后也忘了回顾记笔记,现在得空能想起来点是点吧(这里都是vue.js开发环境)

一、event事件
在开发中,我们要常常用到event对象来处理一些事件:
1、在火狐浏览器怎么获取event的方法
火狐浏览器中,调用函数如果不传递event作为参数是无法获取事件的,需要在函数调用时传递event :
HTML代码

"field-item" @dblclick="handleAdd($event)" value="add-group" v-bind:field-id="item.id">

js代码:

 handleDropdown: function (event) {
          var target = jQuery(event.target);
          ……
          }

网上还有一种常见方法是不传递参数,定义:

var e =arguments.callee.caller.arguments[0]|| event

但是我在vue.js开发中没有成功过,不知为何

2、IE 与火狐下event 事件不兼容
在IE下,event对象有srcElement属性,没有target属性。在火狐下,event对象有target属性,没有srcElement属性,解决办法:

var evt = event.srcElement || event.target;

3、冒泡情况:
阻止冒泡:

event.stopPropagation();

简单情况还可以使用event.currentTarget指向事件所绑定的元素(event.target始终指向事件发生时的元素)

二、文字禁止选中
在开发中经常要出现文字,当文字处于一个组件而不是文本域时,常常是不需要被选中的,操作中如果被选中会很难看,解决办法:
1、css3属性user-select

-webkit-user-select: none;//Chrome等
-moz-user-select: none;  //Firefox
-ms-user-select: none;//IE
user-select: none;

三、webpack-dev-server
配置文件提供一个入口和一个出口, webpack 根据这个来进行 js的打包和编译 工作。虽然 webpack 提供了 webpack –watch 的命令来动态监听文件的改变并实时打包,输出新 bundle.js 文件,这样文件多了之后打包速度会很慢,此外这样的打包的方式不能做到 hot replace ,即每次 webpack 编译之后,你还需要手动刷新浏览器。

webpack-dev-server 其中部分功能就能克服上面的2个问题。 webpack-dev-server 主要是启动了一个使用 express 的 Http服务器 。它的作用 主要是用来伺服资源文件 。此外这个 Http服务器 和 client 使用了 websocket 通讯协议,原始文件作出改动后, webpack-dev-server 会实时的编译。

详细的讲,它将在localhost:8080启动一个express静态资源web服务器,并且会以监听模式自动运行webpack,在浏览器打开http://localhost:8080/或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个socket.io服务实时监听它们的变化并自动刷新页面。

一、jquery如何在内部的DIV的后面动态添加一个DIV?

$("#test").append(" 
XXXXXXXXXXXXX
"
);

或者

$("
XXXXXXXXXXXXX
"
).appendTo("#test");

你可能感兴趣的:(【前端开发】,js开发)